/* ===== Variablen (global) ====================================== */
:root {
  --mcg-radius: 14px;
}



/* ===== Café-Einzelseite: Farbvariable für den Top-Block ========= */
.single-museum_cafe {
  --mcg-hero-bg: #ecdfcc; /* HIER farbe zentral ändern */
}

/* ===== (Optional) Theme-Featured-Image ausblenden =============== */
/* Nur aktiv lassen, wenn du DEIN eigenes Bild (.mcg-featured) nutzt */
.single-museum_cafe .wp-block-post-featured-image,
.single-museum_cafe .post-thumbnail {
  display: none !important;
}

/* ===== Suchleiste ============================================== */
.mcg-searchbar { margin: 8px 0 16px; }
.mcg-searchbar input[type="search"] {
  padding: 8px 10px; border: 1px solid #ddd; border-radius: var(--mcg-radius); min-width: 240px;
}
.mcg-searchbar button {
  padding: 8px 12px; border: 1px solid #ddd; border-radius: var(--mcg-radius); background: #f8f8f8;
}

/* ===== Tag-Chips =============================================== */
.mcg-chip {
  display: inline-block; padding: 8px 12px; border-radius: 999px;
  border: 1px solid #ddd; text-decoration: none;
}

/* ===== Grid ===================================================== */
.mcg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }

/* ===== Card ===================================================== */
a.mcg-card {
  display: block; text-decoration: none; border: 1px solid #eee; border-radius: var(--mcg-radius);
  overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: transform .12s ease, box-shadow .12s ease;
}
a.mcg-card:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,.08); }
.mcg-card img { width: 100%; height: auto; border-radius: calc(var(--mcg-radius) - 2px); display: block; }
.mcg-card h3 { margin: 0 0 6px; font-size: 1.05rem; }
.mcg-card .meta, .mcg-card p.meta { opacity: .8; margin: 0; }
.mcg-card .mcg-card-body { padding: 10px 12px; }

/* ===== Hinweise (z.B. „keine Treffer“) ========================== */
.mcg-hint { grid-column: 1 / -1; opacity: .8; }

/* ===== Top-Block (eigener Hintergrund) ========================== */
/* Block: KEIN top-padding → Hintergrund „ragt“ NICHT über das Bild */
/* Top-Block rund + clippen */
.single-museum_cafe .mcg-top-block{
  background: var(--mcg-hero-bg);
  padding: 0;
  margin: 0 0 24px;
  border-radius: 14px;
  overflow: hidden;
}

/* default figure-Margins killen, sonst gibt's oben/unten „Luft“ */
.single-museum_cafe .mcg-top-block .mcg-featured{ 
  margin: 0; 
  line-height: 0; 
}

/* WICHTIG: Bild erbt den Radius → keine „Blitzer“ an den Ecken */
.single-museum_cafe .mcg-top-block .mcg-featured img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;   /* statt 0! */
  margin: 0;
}

/* Eigenes Featured Image */
.single-museum_cafe .mcg-top-block .mcg-featured img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--mcg-radius);
  margin: 0;
}

/* Innenabstände NACH dem Bild – eine Quelle für Breite/Zentrierung */
.single-museum_cafe .mcg-top-block .mcg-top-inner {
  max-width: var(--wp--style--global--content-size, 720px);
  margin: 0 auto;
  padding: 24px 16px 32px;
}

.mcg-ampel { line-height: 1.2; }

/* (Optional) Wenn du statt .mcg-top-inner die WP-Blöcke selbst limitieren willst,
   kannst du DIESEN Block nutzen – aber NICHT gleichzeitig mit .mcg-top-inner!
.mcg-top-block .entry-header,
.mcg-top-block .entry-content,
.mcg-top-block .post-thumbnail {
  max-width: var(--wp--style--global--content-size, 720px);
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}
*/

/* ===== Slider-Abstand ========================================== */
.mcg-related-slider-wrap,
.mcg-slider,
.mcg-similar-cafes { margin-top: 24px; }

/* Slider-Kachel fixieren */
.mcg-strip .mcg-more-item { 
  flex: 0 0 auto; 
  width: 130px;
  text-decoration: none;
}

/* Einheitliches Thumbnailmaß mit Cropping */
.mcg-strip .mcg-thumb{
  display:block;
  width:120px;
  height:90px;     /* 4:3 – oder 120px für quadratisch */
  object-fit:cover;
  border-radius:8px;
}

.mcg-chip {
  display:inline-block;
  padding:6px 10px;
  border:1px solid #ddd;
  border-radius:999px;
  text-decoration:none;
  margin:4px 8px 0 0;
}
.mcg-chip:hover { background:#f7f7f7; }

.mcg-searchbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin: 8px 0 16px; }
.mcg-searchbar input[type="search"],
.mcg-searchbar select { padding:8px 10px; border:1px solid #ddd; border-radius:8px; min-width:220px; }
.mcg-searchbar button { padding:8px 12px; border:1px solid #ddd; border-radius:8px; background:#f8f8f8; cursor:pointer; }
.mcg-searchbar .mcg-clear { text-decoration:none; padding:6px 8px; opacity:.7; }

/* Label immer über dem Feld */
.cmk-form p {
  margin: 0 0 1.2rem 0;   /* Abstand zwischen Feldern */
}

.cmk-form label {
  display: block;          /* macht das Label zur Blockzeile */
  font-weight: 600;
  margin: 0 0 .35rem 0;    /* kleiner Abstand nach unten */
  color: #222;
}

/* Inputs & Textarea gleich breit */
.cmk-form input[type="text"],
.cmk-form input[type="email"],
.cmk-form input[type="url"],
.cmk-form input[type="number"],
.cmk-form input[type="password"],
.cmk-form input[type="tel"],
.cmk-form select,
.cmk-form textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
}



/* --- CMK Form Reset & Layout --- */
.cmk-form{ 
  width:100%;
  max-width: var(--wp--style--global--content-size, 720px);
  margin:0 auto;
  --cmk-text:#222; --cmk-muted:#6b7280; --cmk-border:#e5e7eb; --cmk-bg:#fff;
  --cmk-focus:#3aa5bf; --cmk-focus-ring:rgba(58,165,191,.25);
  color-scheme: light; /* zwingt helle Form-Controls, verhindert Windows-Dark-Auto */
}
.cmk-form *, .cmk-form *::before, .cmk-form *::after{ box-sizing:border-box; }

/* Label oben, Abstand sauber */
.cmk-form p{ margin:0 0 1.1rem 0; }
.cmk-form label{ display:block; font-weight:600; margin:0 0 .35rem 0; color:var(--cmk-text); }

/* Eingabefelder: 100% Breite, einheitlicher Look */
.cmk-form input[type="text"],
.cmk-form input[type="email"],
.cmk-form input[type="url"],
.cmk-form input[type="number"],
.cmk-form input[type="password"],
.cmk-form input[type="tel"],
.cmk-form select,
.cmk-form textarea{
  display:block;
  width:100%;
  max-width:100% !important;    /* überschreibt evtl. Theme-Limits */
  background:#fff !important;   /* killt Windows/Autofill-Hintergrund */
  color:var(--cmk-text) !important;
  border:1px solid var(--cmk-border);
  border-radius:14px;
  padding:12px 14px;
  line-height:1.4;
  font-size:16px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

/* Hover/Fokus */
.cmk-form input:hover,
.cmk-form select:hover,
.cmk-form textarea:hover{ border-color:#d1d5db; }
.cmk-form input:focus,
.cmk-form select:focus,
.cmk-form textarea:focus{
  outline:none; border-color:var(--cmk-focus);
  box-shadow:0 0 0 4px var(--cmk-focus-ring);
}

/* Button */
.cmk-form .cmk-btn{ appearance:none; border:0; border-radius:999px; padding:12px 20px;
  background:var(--cmk-focus); color:#fff; font-weight:700; cursor:pointer;
  box-shadow:0 6px 14px rgba(58,165,191,.25); }
.cmk-form .cmk-btn:hover{ box-shadow:0 8px 18px rgba(58,165,191,.35); }

/* Checkbox-Block */
.cmk-form .cmk-privacy{ display:flex; gap:.6rem; align-items:flex-start; }
.cmk-form .cmk-privacy input[type="checkbox"]{ width:18px; height:18px; margin-top:.2rem; accent-color:var(--cmk-focus); }
.cmk-form .cmk-privacy a{ color:var(--cmk-focus); text-decoration:underline; }

/* Formular-Hintergrund: Milchglas-Effekt */
.cmk-form {
/*  background: rgba(255, 255, 255, 0.65); /* halbtransparentes Weiß */

  backdrop-filter: blur(6px);            /* leichter Weichzeichner */
  -webkit-backdrop-filter: blur(6px);    /* Safari-Support */
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08); /* dezenter Schatten */
}

/* Eingabefelder auch leicht milchig */
.cmk-form input[type="text"],
.cmk-form input[type="email"],
.cmk-form input[type="url"],
.cmk-form input[type="number"],
.cmk-form input[type="password"],
.cmk-form input[type="tel"],
.cmk-form select,
.cmk-form textarea {
  background: rgba(255,255,255,0.8) !important;
  border: 1px solid rgba(0,0,0,0.1);
  color: #222 !important;
}

/* Autofill anpassen */
.cmk-form input:-webkit-autofill,
.cmk-form textarea:-webkit-autofill,
.cmk-form select:-webkit-autofill {
  -webkit-text-fill-color: #222 !important;
  box-shadow: 0 0 0px 1000px rgba(255,255,255,0.8) inset !important;
  transition: background-color 9999s ease-in-out 0s;
}

/* ===== Einheitliche Bild-Abrundung ===== */

/* Featured Images */
.wp-block-post-featured-image,
.post-thumbnail {
  border-radius: var(--mcg-radius);
  overflow: hidden; /* verhindert Ecken-Blitzer */
}

.wp-block-post-featured-image img,
.post-thumbnail img {
  border-radius: var(--mcg-radius);
  display: block;
}

/* Bilder im Content */
.entry-content img {
  border-radius: var(--mcg-radius);
  height: auto;
  display: block;
}

/* Auch für Galerie- und Blockbilder */
.wp-block-image img,
.wp-block-gallery img {
  border-radius: var(--mcg-radius);
}

/* ===== Formular: Nur Felder hervorheben, Rest transparent ===== */

/* Container: keine Fläche, nur Layout */
.cmk-form{
  background: #f8f7f5;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;                /* ggf. anheben: 8–12px */
}

/* Titel schlicht – ohne Linie/Fläche */
.cmk-form .cmk-title{
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 .75rem 0;
  padding: 0;
  border: 0;
  color: #222;
}

/* Abstände zwischen Feldern */
.cmk-form form p{ margin: 0 0 12px 0; }

/* Eingabefelder: einzig hervorgehoben (milchig) */
.cmk-form input[type="text"],
.cmk-form input[type="email"],
.cmk-form input[type="url"],
.cmk-form input[type="number"],
.cmk-form input[type="password"],
.cmk-form input[type="tel"],
.cmk-form select,
.cmk-form textarea{
  width: 100%;
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 10px;
  padding: 12px 14px;
  color: #222 !important;
  box-shadow: none;
}

/* Fokus klar, aber dezent */
.cmk-form input:focus,
.cmk-form select:focus,
.cmk-form textarea:focus{
  outline: none;
  border-color: #3aa5bf;
  box-shadow: 0 0 0 3px rgba(58,165,191,.25);
}

/* Autofill ohne hartes Weiß */
.cmk-form input:-webkit-autofill,
.cmk-form textarea:-webkit-autofill,
.cmk-form select:-webkit-autofill{
  -webkit-text-fill-color:#222 !important;
  box-shadow: 0 0 0 1000px rgba(255,255,255,.92) inset !important;
  transition: background-color 9999s ease-in-out 0s;
}

/* Checkbox-Zeile transparent, bessere Zeilenumbrüche */
.cmk-form .cmk-privacy label{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  flex-wrap: wrap;                 /* bricht lange Links sauber um */
  margin: 0;
  line-height: 1.4;
}
.cmk-form .cmk-privacy input[type="checkbox"]{
  width: 18px; height: 18px; margin-top: .2rem;
  accent-color: #3aa5bf;
}
.cmk-form .cmk-privacy a{ word-break: break-word; }

/* Button bleibt akzentuiert */
.cmk-form form p:last-child{ text-align: right; }
.cmk-form .cmk-btn{
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 22px; border-radius: 999px;
  background: #3aa5bf; color: #fff; font-weight: 700; border: 0;
  box-shadow: 0 6px 14px rgba(58,165,191,.25); cursor: pointer;
}
.cmk-form .cmk-btn:hover{ box-shadow: 0 8px 18px rgba(58,165,191,.35); }
@media (max-width:640px){
  .cmk-form form p:last-child{ text-align: unset; }
  .cmk-form .cmk-btn{ width: 100%; }
}