/* ==========================================================================
   Branchen-Beispielseiten (/website-fuer/…)

   WICHTIG — anderer Ansatz als der Rest der Website:
   Diese Seiten stehen NICHT im Marken-Look von Cornelia Scherer. Sie
   zeigen, wie die Seite der Kundin aussehen koennte — also traegt die
   ganze Seite den Branchen-Stil, vom Hintergrund bis zur Schrift.
   Dass eine Seite aussehen kann wie corneliascherer.com, sieht man auf
   corneliascherer.com. Hier geht es um alles andere.

   Cornelias Rahmen bleibt auf drei Stellen beschraenkt:
   ein schmaler Balken oben (Einordnung), der Hinweisblock unten und
   der echte Seitenfuss (Impressum, Datenschutz).

   Schriften: liegen lokal in assets/fonts/ — kein externer Request.
   ========================================================================== */

@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/cormorant-garamond-600.woff2") format('woff2'); }
@font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/nunito-sans-400.woff2") format('woff2'); }
@font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/nunito-sans-600.woff2") format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow-condensed-600.woff2") format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-400.woff2") format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-600.woff2") format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/playfair-700.woff2") format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 500; font-display: swap; src: url("../fonts/playfair-500-italic.woff2") format('woff2'); }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/oswald-500.woff2") format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/outfit-400.woff2") format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/outfit-600.woff2") format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap; src: url("../fonts/cormorant-500-italic.woff2") format('woff2'); }

/* ==========================================================================
   Stil 1 — „weich“: beige Grund, Hellblau und Altrosa, Serifen
   Yoga, Coaching, Therapie, Kosmetik, Ernaehrungsberatung
   ========================================================================== */
.mt--weich {
  --bg: #f5efe6;
  --bg-alt: #ece2d5;
  --surface: #fffcf8;
  --ink: #3d3630;
  --muted: #6b625a;
  --line: #e3d9cc;
  --blau: #a9c6d8;
  --blau-tief: #4a7590;
  --rosa: #e9c9c9;
  --rosa-tief: #8a4f50;
  --auf-akzent: #fffcf8;
  --ff-h: 'Cormorant Garamond', Georgia, serif;
  --ff-t: 'Nunito Sans', system-ui, sans-serif;
  --ff-logo: 'Cormorant Garamond', Georgia, serif;
  --ff-logo2: 'Nunito Sans', system-ui, sans-serif;
  --rund: 16px;
  --rund-klein: 10px;
  --h-weight: 600;
  --h-track: 0;
  --h-transform: none;
  --h-lh: 1.1;
}

/* ==========================================================================
   Stil 2 — „solide“: dunkler Grund, Stahlblau, schmale Groteske
   Dachdecker, Elektrik, Bau, Kfz, Technik
   ========================================================================== */
.mt--solide {
  --bg: #14181d;
  --bg-alt: #1b2128;
  --surface: #1d232a;
  --ink: #f0f2f4;
  --muted: #aab2ba;
  --line: #2f3841;
  --blau: #5a8cb8;
  --blau-tief: #78a6cd;
  --rosa: #8b939b;
  --rosa-tief: #aab2ba;
  --auf-akzent: #12161a;
  --ff-h: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --ff-t: 'Inter', system-ui, sans-serif;
  --ff-logo: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --ff-logo2: 'Inter', system-ui, sans-serif;
  --rund: 0;
  --rund-klein: 0;
  --h-weight: 600;
  --h-track: .01em;
  --h-transform: uppercase;
  --h-lh: 1.02;
}

/* ==========================================================================
   Stil 3 — „genuss“: dunkles Gruen, Messing, Serifen (Gastronomie)
   ========================================================================== */
.mt--genuss {
  --bg: #1a2420; --bg-alt: #223029; --surface: #2a3931;
  --ink: #f3ede2; --muted: #b9c4ba; --line: #3a4b41;
  --blau: #c9a227; --blau-tief: #d9b64a; --rosa: #e0c9a0; --rosa-tief: #d9b64a;
  --auf-akzent: #1a2420;
  --ff-h: 'Playfair Display', Georgia, serif;
  --ff-t: 'Outfit', system-ui, sans-serif;
  --ff-logo: 'Playfair Display', Georgia, serif;
  --ff-logo2: 'Outfit', system-ui, sans-serif;
  --rund: 2px; --rund-klein: 2px;
  --h-weight: 600; --h-track: .01em; --h-transform: none; --h-lh: 1.12;
}

/* ==========================================================================
   Stil 4 — „zunft“: Schwarz und Kalkweiss, Signalrot (Schornsteinfeger,
   Hausmeister, Reinigung — Handwerk mit Tradition)
   ========================================================================== */
.mt--zunft {
  --bg: #f2f0ec; --bg-alt: #e4e1db; --surface: #ffffff;
  --ink: #17171a; --muted: #55555c; --line: #d3d0c9;
  --blau: #b4341f; --blau-tief: #932816;
  --rosa: #c9c5bd; --rosa-tief: #932816;
  --auf-akzent: #ffffff;
  --ff-h: 'Oswald', 'Arial Narrow', sans-serif;
  --ff-t: 'Inter', system-ui, sans-serif;
  --ff-logo: 'Oswald', 'Arial Narrow', sans-serif;
  --ff-logo2: 'Inter', system-ui, sans-serif;
  --rund: 0; --rund-klein: 0;
  --h-weight: 500; --h-track: .04em; --h-transform: uppercase; --h-lh: 1.05;
}

/* ==========================================================================
   Stil 5 — „klar“: Weiss und Mint, viel Ruhe (Praxis, Apotheke, Pflege)
   ========================================================================== */
.mt--klar {
  --bg: #f7fafa; --bg-alt: #e8f2f0; --surface: #ffffff;
  --ink: #16302c; --muted: #4d6b65; --line: #d7e5e2;
  --blau: #6fbfae; --blau-tief: #227a68; --rosa: #a9d8ce; --rosa-tief: #227a68;
  --auf-akzent: #ffffff;
  --ff-h: 'Outfit', system-ui, sans-serif;
  --ff-t: 'Inter', system-ui, sans-serif;
  --ff-logo: 'Outfit', system-ui, sans-serif;
  --ff-logo2: 'Inter', system-ui, sans-serif;
  --rund: 22px; --rund-klein: 999px;
  --h-weight: 600; --h-track: -.02em; --h-transform: none; --h-lh: 1.1;
}

/* ==========================================================================
   Stil 6 — „digital“: Off-White und Indigo, geometrisch (Assistenz,
   Online-Dienstleistung, Buchhaltung)
   ========================================================================== */
.mt--digital {
  --bg: #f6f6fb; --bg-alt: #ecedf7; --surface: #ffffff;
  --ink: #1d1f33; --muted: #55587a; --line: #dcdeee;
  --blau: #6f76d6; --blau-tief: #4a51ad; --rosa: #c9cdf0; --rosa-tief: #4a51ad;
  --auf-akzent: #ffffff;
  --ff-h: 'Outfit', system-ui, sans-serif;
  --ff-t: 'Nunito Sans', system-ui, sans-serif;
  --ff-logo: 'Outfit', system-ui, sans-serif;
  --ff-logo2: 'Nunito Sans', system-ui, sans-serif;
  --rund: 14px; --rund-klein: 8px;
  --h-weight: 600; --h-track: -.02em; --h-transform: none; --h-lh: 1.08;
}

/* ==========================================================================
   Stil 7 — „edel“: Creme und Aubergine, hoher Kontrast in der Schrift
   (Coaching, Beratung, Anwalt, Steuerberatung)
   ========================================================================== */
.mt--edel {
  --bg: #f7f3ee; --bg-alt: #ece5dc; --surface: #ffffff;
  --ink: #2e1f2b; --muted: #5f4d5a; --line: #ded3c8;
  --blau: #7a3f63; --blau-tief: #63304f; --rosa: #d9bfa9; --rosa-tief: #8a5a3c;
  --auf-akzent: #f7f3ee;
  --ff-h: 'Playfair Display', Georgia, serif;
  --ff-t: 'Inter', system-ui, sans-serif;
  --ff-logo: 'Playfair Display', Georgia, serif;
  --ff-logo2: 'Inter', system-ui, sans-serif;
  --rund: 0; --rund-klein: 0;
  --h-weight: 700; --h-track: -.01em; --h-transform: none; --h-lh: 1.06;
}

/* ==========================================================================
   Stil 8 — „kino“: fast Schwarz und Bernstein (Video, Foto, Musik)
   ========================================================================== */
.mt--kino {
  --bg: #0e0d0c; --bg-alt: #171614; --surface: #1c1a17;
  --ink: #f2ede6; --muted: #a89f93; --line: #2e2b26;
  --blau: #e0a33c; --blau-tief: #eab55c; --rosa: #c98b3a; --rosa-tief: #eab55c;
  --auf-akzent: #0e0d0c;
  --ff-h: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --ff-t: 'Outfit', system-ui, sans-serif;
  --ff-logo: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --ff-logo2: 'Outfit', system-ui, sans-serif;
  --rund: 0; --rund-klein: 0;
  --h-weight: 600; --h-track: .03em; --h-transform: uppercase; --h-lh: 1;
}

/* ==========================================================================
   Stil 9 — „frisch“: helles Gruen und Sonnengelb (Tierbetreuung,
   Garten, Kinder, alles Draussen)
   ========================================================================== */
.mt--frisch {
  --bg: #f4f8f0; --bg-alt: #e6efdd; --surface: #ffffff;
  --ink: #23301c; --muted: #4f6144; --line: #d8e4cc;
  --blau: #5f8f3f; --blau-tief: #446b2b; --rosa: #e8b53e; --rosa-tief: #8a5a12;
  --auf-akzent: #ffffff;
  --ff-h: 'Nunito Sans', system-ui, sans-serif;
  --ff-t: 'Nunito Sans', system-ui, sans-serif;
  --ff-logo: 'Nunito Sans', system-ui, sans-serif;
  --ff-logo2: 'Inter', system-ui, sans-serif;
  --rund: 20px; --rund-klein: 999px;
  --h-weight: 600; --h-track: -.01em; --h-transform: none; --h-lh: 1.12;
}

/* ==========================================================================
   Grundgeruest der Beispielseite
   ========================================================================== */
/* Der Stil haengt an einem Wrapper-Element, NICHT am <body>. Sonst greifen
   Regeln wie `.mt h2` bis in Cornelias echten Seitenfuss durch. */
.mt { background: var(--bg); color: var(--ink); font-family: var(--ff-t); }
.mt-wrap { max-width: 1140px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 40px); }

.mt h1, .mt h2, .mt h3, .mt .mt-h {
  font-family: var(--ff-h); font-weight: var(--h-weight);
  letter-spacing: var(--h-track); text-transform: var(--h-transform);
  line-height: var(--h-lh); color: var(--ink); margin: 0;
}
.mt p { margin: 0; }

/* ---------- Einordnungsbalken ganz oben ---------------------------------- */
.mt-balken {
  background: var(--ink); color: var(--bg);
  font-family: var(--ff-t); font-size: 13.5px; line-height: 1.45;
}
.mt-balken__inner {
  max-width: 1140px; margin: 0 auto; padding: 11px clamp(20px, 5vw, 40px);
  display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline;
}
.mt-balken strong { font-weight: 600; }
.mt-balken a { color: var(--bg); text-decoration: underline; text-underline-offset: 3px; }
.mt-balken a:hover { text-decoration: none; }

/* ---------- Kopf der Beispielseite --------------------------------------- */
.mt-head { padding: clamp(20px, 3vw, 30px) 0; }
.mt-head__inner {
  display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center;
}
/* ---------- Wortmarke ----------------------------------------------------
   Eine einfache Schriftmarke, kein Bildlogo: zwei Schriften kombiniert,
   dazu ein kleines Zeichen. Genau das, was zu Cornelias Angebot passt —
   es muss stimmig sein, nicht aufwendig. Je Branche anders aufgebaut. */
.mt-logo {
  display: inline-flex; align-items: baseline; gap: 8px;
  color: var(--ink); line-height: 1;
}
.mt-logo__eins {
  font-family: var(--ff-logo); font-size: 25px; font-weight: var(--h-weight);
  letter-spacing: var(--h-track);
}
.mt-logo__zwei {
  font-family: var(--ff-logo2); font-size: 12px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
}
.mt-logo__zeichen { color: var(--blau-tief); }

/* weich: Serifen-Kursive plus gesperrte Versalien, dazwischen ein Punkt */
.mt--weich .mt-logo__eins { font-style: italic; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 30px; }

/* solide: Versalien, davor ein Balken statt eines Zeichens */
.mt--solide .mt-logo { gap: 10px; }
.mt--solide .mt-logo__eins { text-transform: uppercase; letter-spacing: .04em; font-size: 23px; }
.mt--solide .mt-logo__zeichen { width: 3px; height: 21px; background: var(--blau-tief); display: inline-block; }

/* genuss: hoher Kontrast, Name gross, Zusatz klein darunter */
.mt--genuss .mt-logo { flex-direction: column; align-items: flex-start; gap: 5px; }
.mt--genuss .mt-logo__eins { font-size: 27px; letter-spacing: .01em; }
.mt--genuss .mt-logo__zwei { letter-spacing: .34em; font-size: 10.5px; }

/* zunft: schmale Versalien mit Bezirksnummer im Kasten */
.mt--zunft .mt-logo__eins { font-size: 26px; letter-spacing: .06em; }
.mt--zunft .mt-logo__zeichen {
  font-family: var(--ff-logo2); font-size: 11px; font-weight: 600; letter-spacing: .08em;
  background: var(--blau-tief); color: #fff; padding: 4px 7px;
}

/* klar: geometrisch, zweifarbig im selben Wort, mit rundem Punkt */
.mt--klar .mt-logo { gap: 7px; }
.mt--klar .mt-logo__eins { font-size: 24px; letter-spacing: -.02em; }
.mt--klar .mt-logo__eins b { font-weight: 600; color: var(--blau-tief); }
.mt--klar .mt-logo__zeichen {
  width: 9px; height: 9px; border-radius: 999px; background: var(--blau-tief);
  display: inline-block; align-self: center;
}
.mt-nav { display: flex; flex-wrap: wrap; gap: 20px; margin-left: auto; align-items: center; }
.mt-nav > span { font-size: 14.5px; color: var(--muted); }
.mt-nav .mt-btn { color: var(--auf-akzent); }

.mt-btn {
  display: inline-block; padding: 14px 26px; border-radius: var(--rund-klein);
  background: var(--blau-tief); color: var(--auf-akzent);
  font-family: var(--ff-t); font-weight: 600; font-size: 15px; line-height: 1;
}
.mt-btn--klein { padding: 11px 18px; font-size: 14px; }
.mt-btn--hell { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }

/* ---------- Held ---------------------------------------------------------- */
.mt-held {
  display: grid; gap: clamp(28px, 4vw, 52px); align-items: center;
  grid-template-columns: 1fr 1fr; padding: clamp(24px, 4vw, 56px) 0 clamp(40px, 6vw, 76px);
}
.mt-held__kicker {
  font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--rosa-tief); margin-bottom: 18px; font-weight: 600;
}
.mt-held h1 { font-size: clamp(38px, 6vw, 68px); margin-bottom: 22px; }
.mt-held__lead { font-size: clamp(16.5px, 2vw, 18.5px); line-height: 1.65; color: var(--muted); max-width: 44ch; }
.mt-held__cta { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- Bildflaechen -------------------------------------------------- */
.mt-bild {
  position: relative; border-radius: var(--rund); overflow: hidden;
  background: linear-gradient(145deg, var(--blau) 0%, var(--rosa) 100%);
  display: flex; align-items: flex-end; justify-content: flex-start;
  min-height: 320px;
}
.mt-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mt-bild--hoch { min-height: 420px; }
.mt-bild--breit { min-height: 260px; }
/* Platzhalter-Fahne: verschwindet, sobald ein echtes Bild eingesetzt wird. */
.mt-bild__hinweis {
  position: absolute; left: 14px; bottom: 14px;
  background: rgba(20,20,20,.72); color: #fff;
  font-family: var(--ff-t); font-size: 11.5px; line-height: 1.3;
  padding: 7px 11px; border-radius: 4px; max-width: calc(100% - 28px);
}

/* ---------- Abschnitte ---------------------------------------------------- */
.mt-abschnitt { padding: clamp(40px, 6vw, 76px) 0; }
.mt-abschnitt--alt { background: var(--bg-alt); }
.mt-abschnitt__kopf { max-width: 54ch; margin-bottom: clamp(26px, 4vw, 42px); }
.mt-abschnitt h2 { font-size: clamp(28px, 4vw, 44px); margin-bottom: 16px; }
.mt-abschnitt__lead { font-size: 16.5px; line-height: 1.65; color: var(--muted); }

.mt-drei { display: grid; gap: clamp(18px, 2.5vw, 26px); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.mt-karte {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--rund); padding: clamp(22px, 3vw, 30px);
}
.mt-karte h3 { font-size: 22px; margin-bottom: 10px; }
.mt-karte p { font-size: 15px; line-height: 1.6; color: var(--muted); }
.mt-karte__preis { font-family: var(--ff-h); font-size: 30px; color: var(--blau-tief); margin-bottom: 6px; }

/* Zwei Spalten: Bild neben Text */
.mt-zwei {
  display: grid; gap: clamp(28px, 4vw, 56px); align-items: center;
  grid-template-columns: 1fr 1fr;
}
.mt-zwei--gedreht .mt-zwei__bild { order: 2; }
.mt-zwei h2 { margin-bottom: 16px; }
.mt-zwei p { font-size: 16px; line-height: 1.7; color: var(--muted); }
.mt-zwei p + p { margin-top: 14px; }

/* Kursplan / Leistungsliste */
.mt-plan { display: grid; gap: 2px; background: var(--line); border-radius: var(--rund); overflow: hidden; }
.mt-plan__reihe {
  display: grid; gap: 8px 20px; grid-template-columns: 130px 1fr auto;
  background: var(--surface); padding: 18px clamp(18px, 2.5vw, 26px); align-items: baseline;
}
.mt-plan__zeit { font-family: var(--ff-h); font-size: 19px; color: var(--blau-tief); }
.mt-plan__was { font-size: 15.5px; font-weight: 600; }
.mt-plan__ort { font-size: 14px; color: var(--muted); }

/* Zitat / Band */
.mt-band {
  background: var(--blau-tief); color: var(--auf-akzent);
  border-radius: var(--rund); padding: clamp(30px, 5vw, 54px);
  text-align: center;
}
.mt-band p { font-family: var(--ff-h); font-size: clamp(22px, 3.2vw, 34px); line-height: 1.3; max-width: 26ch; margin: 0 auto; }
.mt-band__wer { font-family: var(--ff-t); font-size: 14.5px; margin-top: 18px; opacity: .85; }

/* Zeiten-Band: getrennte Bloecke statt einem durchlaufenden Satz.
   Die Trennstellen sind inhaltlich vorgegeben — jeder Zeitraum steht
   fuer sich, die Rufnummer bekommt einen eigenen Block. */
.mt-zeiten { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.mt-zeiten > div {
  background: var(--blau-tief); color: var(--auf-akzent);
  padding: clamp(24px, 3.5vw, 38px) clamp(18px, 2.5vw, 30px); text-align: center;
}
.mt-zeiten dt {
  font-family: var(--ff-t); font-size: 12px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; opacity: .78; margin-bottom: 10px;
}
.mt-zeiten dd { margin: 0; font-family: var(--ff-h); font-size: clamp(21px, 2.6vw, 28px); line-height: 1.25; }
.mt-zeiten dd small { display: block; font-family: var(--ff-t); font-size: 14px; margin-top: 8px; opacity: .8; }

/* ---------- Fuss der Beispielseite --------------------------------------
   Bewusst je Stil ANDERS aufgebaut, nicht nur anders eingefaerbt: Der
   Fuss ist das, was man zuletzt sieht, und soll zur Branche passen.  */
.mt-foot { padding: clamp(34px, 5vw, 60px) 0; }
.mt-foot__logo { font-family: var(--ff-h); font-size: 24px; font-weight: var(--h-weight);
  letter-spacing: var(--h-track); text-transform: var(--h-transform); margin-bottom: 12px; }
.mt-foot__zeile { font-size: 15px; line-height: 1.75; }
.mt-foot__label {
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  margin-bottom: 8px; font-weight: 600;
}
.mt-foot__links { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; }

/* weich: mittig, luftig, warmer Grund statt harter Kontrast */
.mt--weich .mt-foot {
  background: var(--bg-alt); color: var(--ink);
  border-top: 1px solid var(--line); text-align: center;
}
.mt--weich .mt-foot__inner { display: grid; gap: 18px; justify-items: center; }
.mt--weich .mt-foot__zeile { color: var(--muted); max-width: 46ch; }
.mt--weich .mt-foot__label { color: var(--rosa-tief); }
.mt--weich .mt-foot__links { justify-content: center; }
.mt--weich .mt-foot__links span { color: var(--muted); }

/* Grundverteilung: mehrspaltig statt gestapelt. Ohne diese Regel fallen
   Stile ohne eigene Fuss-Vorgabe in den Blockfluss zurueck. */
.mt-foot__inner {
  display: grid; gap: 26px 40px; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* solide: dunkel, dreispaltig, Telefonnummer als groesstes Element */
.mt--solide .mt-foot { background: #0e1216; color: var(--ink); border-top: 3px solid var(--blau); }
.mt--solide .mt-foot__inner {
  display: grid; gap: 26px 40px; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.mt--solide .mt-foot__zeile { color: var(--muted); }
.mt--solide .mt-foot__label { color: var(--blau-tief); }
.mt--solide .mt-foot__tel {
  font-family: var(--ff-h); font-size: 34px; line-height: 1.1;
  color: var(--blau-tief); text-transform: var(--h-transform);
}
.mt--solide .mt-foot__links span { color: var(--muted); }

/* genuss: vier Spalten auf tiefem Gruen, Messingkante oben */
.mt--genuss .mt-foot { background: #121a17; color: var(--ink); border-top: 2px solid var(--blau-tief); }
.mt--genuss .mt-foot__zeile { color: var(--muted); }
.mt--genuss .mt-foot__label { color: var(--blau-tief); letter-spacing: .24em; }
.mt--genuss .mt-foot__tel { font-family: var(--ff-h); font-size: 27px; color: var(--ink); line-height: 1.15; }
.mt--genuss .mt-foot__logo { font-size: 26px; }

/* zunft: heller Grund, Spalten durch feine Linien getrennt */
.mt--zunft .mt-foot { background: var(--surface); color: var(--ink); border-top: 4px solid var(--blau-tief); }
.mt--zunft .mt-foot__inner { gap: 0; }
.mt--zunft .mt-foot__inner > div { padding: 0 clamp(16px, 2vw, 26px); border-left: 1px solid var(--line); }
.mt--zunft .mt-foot__inner > div:first-child { padding-left: 0; border-left: 0; }
.mt--zunft .mt-foot__zeile { color: var(--muted); }
.mt--zunft .mt-foot__label { color: var(--blau-tief); }
.mt--zunft .mt-foot__tel { font-family: var(--ff-h); font-size: 26px; color: var(--ink); }

/* klar: sehr heller Grund, viel Luft, runde Trennung durch Abstand */
.mt--klar .mt-foot { background: var(--bg-alt); color: var(--ink); }
.mt--klar .mt-foot__inner { gap: 30px 46px; }
.mt--klar .mt-foot__zeile { color: var(--muted); }
.mt--klar .mt-foot__label { color: var(--blau-tief); letter-spacing: .14em; }
.mt--klar .mt-foot__tel { font-family: var(--ff-h); font-size: 26px; color: var(--blau-tief); font-weight: 600; }

/* ---------- Cornelias Pflichtstreifen ganz unten -------------------------
   ABWEICHUNG von der Hausregel "Footer ueberall gleich": Auf diesen
   Seiten wuerde der grosse Marken-Footer die Beispielseite erschlagen
   und beide Branchen wieder gleich aussehen lassen. Deshalb hier nur
   ein schmaler Streifen mit dem, was rechtlich erreichbar sein muss. */
.cs-streifen {
  background: var(--surface-inverse); color: var(--text-inverse);
  padding: 20px clamp(20px, 5vw, 40px);
}
.cs-streifen__inner {
  max-width: var(--container-max); margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: baseline;
  font-family: var(--ff-read); font-size: 14px;
}
.cs-streifen a { color: rgba(232,224,216,.85); text-decoration: underline; text-underline-offset: 3px; }
.cs-streifen a:hover { color: var(--accent-highlight); }
.cs-streifen__marke { font-family: var(--font-mono); font-weight: 700; font-size: 14px; }
.cs-streifen__rechts { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px 18px; }

@media (max-width: 780px) {
  .mt-held, .mt-zwei { grid-template-columns: 1fr; }
  .mt-zwei--gedreht .mt-zwei__bild { order: 0; }
  .mt-held__bild { order: -1; }
  .mt-plan__reihe { grid-template-columns: 1fr; }
  .mt-nav { display: none; }
}

/* ==========================================================================
   Cornelias Rahmen unter der Beispielseite
   Bewusst neutral gehalten, damit er sich von der Beispielseite absetzt.
   ========================================================================== */
.cs-rahmen { background: var(--surface-page); padding: clamp(44px, 6vw, 76px) 0; }
.cs-rahmen__inner { max-width: var(--container-max); margin: 0 auto; padding: 0 clamp(20px, 5vw, 40px); }
.cs-rahmen__eyebrow {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: var(--tracking-widest);
  text-transform: uppercase; color: var(--text-accent); margin: 0 0 var(--space-3);
}
.cs-rahmen__title {
  font-family: var(--font-mono); font-weight: 700; font-size: clamp(24px, 3.4vw, 34px);
  line-height: 1.15; color: var(--text-primary); margin: 0 0 var(--space-4);
}
.cs-karten { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); margin-top: var(--space-5); }
.cs-karte { border: 1px solid var(--border-default); background: var(--surface-card); padding: clamp(20px, 3vw, 28px); }
.cs-karte__title { font-family: var(--font-mono); font-weight: 700; font-size: 16px; margin: 0 0 10px; color: var(--text-primary); }
.cs-karte__text { font-family: var(--ff-read); font-size: 15px; line-height: 1.6; color: var(--text-primary); margin: 0; }
.cs-karte__text + .cs-karte__text { margin-top: 10px; }
.cs-palette { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--space-4); }
.cs-palette__item { width: 108px; }
.cs-palette__chip { height: 54px; display: block; border: 1px solid var(--border-default); }
.cs-palette__name { font-family: var(--font-mono); font-size: 12px; color: var(--text-primary); margin: 7px 0 1px; }
.cs-palette__hex { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }


/* ---------- Uebersichtsseite /website-fuer/ ------------------------------ */
.beispiel-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.beispiel-karte {
  display: grid; gap: 10px; align-content: start;
  padding: clamp(22px, 3vw, 30px); text-decoration: none;
  border: 1px solid var(--border-default); background: var(--surface-card);
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.beispiel-karte:hover, .beispiel-karte:focus-visible { border-color: var(--accent-primary); }
.beispiel-karte__eyebrow {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--text-muted);
}
.beispiel-karte__eyebrow .mark { color: var(--text-accent); }
.beispiel-karte__title {
  font-family: var(--font-mono); font-weight: 700; font-size: 20px;
  line-height: 1.2; color: var(--text-primary);
}
.beispiel-karte__text { font-family: var(--ff-read); font-size: 15px; line-height: 1.6; color: var(--text-primary); }
.beispiel-karte__more { font-family: var(--font-mono); font-size: 13px; color: var(--text-accent); margin-top: 4px; }


/* ==========================================================================
   LAYOUTS — der zweite Hebel neben der Farbe.
   Zwei Seiten koennen dieselben Farben haben und trotzdem voellig anders
   wirken, wenn der Aufbau ein anderer ist. Deshalb hat jede Beispielseite
   ausser dem Stil auch ein Layout.
   ========================================================================== */

/* ---------- Layout A: Vollbild-Held ---------------------------------------
   Bild randlos ueber die ganze Breite, Text darauf. Lebt von einem
   starken Motiv — Gastronomie, Hotel, Fotografie.                        */
.mt-voll {
  position: relative; min-height: min(86vh, 760px);
  display: grid; align-items: end; overflow: hidden;
}
.mt-voll__bild { position: absolute; inset: 0; }
.mt-voll__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mt-voll__schleier {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,12,10,.92) 0%, rgba(8,12,10,.55) 42%, rgba(8,12,10,.25) 100%);
}
.mt-voll__inhalt { position: relative; padding: clamp(36px, 6vw, 86px) 0; }
/* Kopfzeile ueber dem Vollbild: die Marke muss auch hier oben stehen. */
.mt-voll__kopf {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  padding: clamp(18px, 3vw, 28px) 0;
}
.mt-voll__kopf .mt-head__inner { max-width: 1140px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 40px); }
.mt-voll:not(.mt-voll--hell) .mt-voll__kopf .mt-logo,
.mt-voll:not(.mt-voll--hell) .mt-voll__kopf .mt-logo__eins { color: #fff; }
.mt-voll:not(.mt-voll--hell) .mt-voll__kopf .mt-logo__zwei,
.mt-voll:not(.mt-voll--hell) .mt-voll__kopf .mt-nav > span:not(.mt-btn) { color: rgba(255,255,255,.82); }
.mt-voll h1 { font-size: clamp(40px, 7.5vw, 88px); color: #fff; max-width: 15ch; margin-bottom: 20px; }
.mt-voll__lead { font-size: clamp(17px, 2vw, 20px); line-height: 1.6; color: rgba(255,255,255,.88); max-width: 46ch; }
.mt-voll__kicker {
  font-size: 13px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--blau-tief); margin-bottom: 18px; font-weight: 600;
}
.mt-voll__cta { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Layout B: Video-Held ------------------------------------------
   Wie der Vollbild-Held, nur bewegt. Video ist stumm, laeuft in Schleife
   und wird bei "Bewegung reduzieren" durch das Standbild ersetzt.        */
.mt-video__medium { position: absolute; inset: 0; }
.mt-video__medium video, .mt-video__medium img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
@media (prefers-reduced-motion: reduce) {
  .mt-video__medium video { display: none; }
  .mt-video__medium .mt-video__still { display: block; }
}
.mt-video__still { display: none; position: absolute; inset: 0; }
.mt-voll--hell .mt-voll__schleier {
  background: linear-gradient(to top, rgba(247,250,250,.96) 0%, rgba(247,250,250,.72) 46%, rgba(247,250,250,.34) 100%);
}
.mt-voll--hell h1 { color: var(--ink); }
.mt-voll--hell .mt-voll__lead { color: var(--muted); }

/* ---------- Layout C: Kachelraster statt Held -----------------------------
   Kein grosses Aufmacherbild, sondern ein Raster aus Text- und
   Bildkacheln. Wirkt sachlich und uebersichtlich — passt zu Betrieben,
   bei denen Leistung und Erreichbarkeit zaehlen, nicht Stimmung.        */
.mt-kachel {
  display: grid; gap: 3px; padding: clamp(20px, 4vw, 44px) 0;
  grid-template-columns: repeat(4, 1fr);
}
.mt-kachel > * { background: var(--surface); padding: clamp(22px, 3vw, 34px); }
.mt-kachel__haupt { grid-column: span 2; grid-row: span 2; display: grid; align-content: center; gap: 18px; }
.mt-kachel__haupt h1 { font-size: clamp(34px, 4.6vw, 58px); }
.mt-kachel__haupt p { font-size: 16.5px; line-height: 1.65; color: var(--muted); max-width: 40ch; }
.mt-kachel__bild { grid-column: span 2; grid-row: span 2; padding: 0; position: relative; min-height: 260px; }
.mt-kachel__bild img { width: 100%; height: 100%; object-fit: cover; display: block; position: absolute; inset: 0; }
.mt-kachel__klein { display: grid; align-content: start; gap: 8px; }
.mt-kachel__klein .mt-kachel__zahl {
  font-family: var(--ff-h); font-size: 34px; color: var(--blau-tief);
  text-transform: var(--h-transform); line-height: 1;
}
.mt-kachel__klein p { font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.mt-kachel--akzent { background: var(--blau-tief); color: var(--auf-akzent); }
.mt-kachel--akzent .mt-kachel__zahl, .mt-kachel--akzent p { color: var(--auf-akzent); }
@media (max-width: 860px) {
  .mt-kachel { grid-template-columns: repeat(2, 1fr); }
  .mt-kachel__haupt, .mt-kachel__bild { grid-column: span 2; grid-row: span 1; }
}

/* ---------- Bausteine, die alle Layouts nutzen ---------------------------- */
.mt-streifen {
  display: grid; gap: 3px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  background: var(--line);
}
.mt-streifen > div { background: var(--bg); padding: clamp(20px, 3vw, 30px); }
.mt-streifen dt { font-family: var(--ff-h); font-size: 15px; text-transform: var(--h-transform); letter-spacing: var(--h-track); margin-bottom: 6px; }
.mt-streifen dd { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
.mt-galerie { display: grid; gap: 3px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.mt-galerie img { width: 100%; height: 100%; min-height: 220px; object-fit: cover; display: block; }


/* ==========================================================================
   Ankuendigungsstreifen ganz oben
   Fuer zeitlich begrenzte Sachen: ein Event, ein neuer Kurs, eine
   Aktion. Sitzt ueber dem Seitenkopf, ist schmal und laesst sich
   schliessen. Farben kommen aus dem jeweiligen Stil, deshalb passt er
   ueberall ohne Sonderregel.
   ========================================================================== */
.mt-aktion {
  background: var(--blau-tief); color: var(--auf-akzent);
  font-family: var(--ff-t); position: relative;
}
.mt-aktion__inner {
  max-width: 1140px; margin: 0 auto;
  padding: 12px clamp(46px, 6vw, 60px) 12px clamp(20px, 5vw, 40px);
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  align-items: center; justify-content: center; text-align: center;
}
.mt-aktion__punkt {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--auf-akzent); flex-shrink: 0;
  animation: aktionPuls 2.4s var(--ease-standard) infinite;
}
@keyframes aktionPuls { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .mt-aktion__punkt { animation: none; } }
.mt-aktion__marke {
  font-family: var(--ff-h); font-size: 16px; font-weight: var(--h-weight);
  letter-spacing: var(--h-track); text-transform: var(--h-transform);
}
.mt-aktion__text { font-size: 14.5px; line-height: 1.4; }
.mt-aktion__link {
  color: inherit; font-size: 14.5px; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}
.mt-aktion__link:hover { text-decoration: none; }
.mt-aktion__zu {
  position: absolute; top: 50%; right: clamp(12px, 3vw, 20px); transform: translateY(-50%);
  background: none; border: 0; cursor: pointer; color: inherit;
  font-size: 20px; line-height: 1; padding: 6px 9px; border-radius: 4px;
  font-family: var(--ff-t);
}
.mt-aktion__zu:hover { background: rgba(0,0,0,.12); }
@media (max-width: 620px) {
  .mt-aktion__inner { padding-right: 46px; }
  .mt-aktion__text { width: 100%; }
}


/* ---------- Begruessung: grosses Portraet neben Text ---------------------
   Fuer Betriebe, bei denen eine Person das Vertrauen traegt — Handwerk
   im Kehrbezirk, Praxen, Beratung. Ein Gesicht wirkt hier staerker als
   ein Aufmacherbild ohne Menschen.                                      */
.mt-gruss { padding: clamp(30px, 4vw, 56px) 0 clamp(20px, 3vw, 34px); }
.mt-gruss__inner {
  display: grid; gap: clamp(26px, 4vw, 54px); align-items: center;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}
.mt-gruss__bild { position: relative; }
.mt-gruss__bild img {
  width: 100%; height: auto; display: block;
  border-radius: var(--rund); object-fit: cover;
}
.mt-gruss__text h1 { font-size: clamp(31px, 4.4vw, 52px); margin-bottom: 18px; }
@media (max-width: 780px) {
  .mt-gruss__inner { grid-template-columns: 1fr; }
}
/* Zahlenreihe unter der Begruessung: vier gleich breite Kacheln */
.mt-kachel--zahlen { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) { .mt-kachel--zahlen { grid-template-columns: repeat(2, 1fr); } }


/* Im Seitenfuss ist die Spalte schmal — die Wortmarke wuerde dort sonst
   in die Nachbarspalte laufen. Deshalb dort untereinander statt nebeneinander. */
.mt-foot .mt-logo { flex-wrap: wrap; row-gap: 4px; max-width: 100%; }
.mt--zunft .mt-foot .mt-logo { flex-direction: column; align-items: flex-start; gap: 6px; }
.mt--zunft .mt-foot .mt-logo__eins { font-size: 24px; }

/* Rechtliches setzt sich mit etwas Abstand und einer feinen Linie ab,
   sonst klebt es am Text darueber. */
.mt-foot__rechtlich {
  display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line);
}
.mt--solide .mt-foot__rechtlich, .mt--genuss .mt-foot__rechtlich { border-top-color: rgba(255,255,255,.16); }


/* ---------- Layout D: Typo-Held ------------------------------------------
   Kein Bild oben, sondern grosse Schrift. Das Bild kommt darunter ueber
   die volle Breite. Wirkt souveraen und ruhig — passt zu Beratung,
   Coaching, Kanzleien, wo das Wort vor dem Bild kommt.               */
.mt-typo { padding: clamp(48px, 8vw, 110px) 0 clamp(30px, 4vw, 52px); text-align: center; }
.mt-typo__kicker {
  font-size: 13px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--rosa-tief); margin-bottom: 22px; font-weight: 600;
}
.mt-typo h1 { font-size: clamp(38px, 7vw, 86px); max-width: 17ch; margin: 0 auto 26px; }
.mt-typo__lead {
  font-size: clamp(17px, 2vw, 20px); line-height: 1.6; color: var(--muted);
  max-width: 52ch; margin: 0 auto;
}
.mt-typo__cta { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.mt-typo__bild { margin-top: clamp(36px, 5vw, 64px); }
.mt-typo__bild img { width: 100%; height: clamp(240px, 38vw, 460px); object-fit: cover; display: block; border-radius: var(--rund); }

/* ---------- Punkteliste mit Haken ---------------------------------------- */
.mt-haken { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.mt-haken li { display: flex; gap: 12px; align-items: baseline; font-size: 16px; line-height: 1.6; color: var(--muted); }
.mt-haken li::before { content: "✓"; color: var(--blau-tief); font-weight: 700; flex-shrink: 0; }
.mt-haken strong { color: var(--ink); font-weight: 600; }