/* ============================================================
   Meisterplan78, Designsystem der Landingpage

   Schwestermarke von KopfIdee78 und bewusst aus derselben
   Familie: dieselbe Schrift, dieselbe Kartensprache, derselbe
   Anthrazit. Unterschieden werden die beiden ueber die
   Akzentfarbe und ueber das Motiv im Hero.

     KopfIdee78     Gelb #F5C518   Ideen, KI
     Meisterplan78  Blau #0084F4   Umsetzung, Programmierung

   Die beiden Werte #0084F4 und #080D18 stammen aus Mannis
   offiziellem Designset (MeisterPlan78-Designset.zip, 08.08.2026)
   und sind damit verbindlich. Das Schwarz ist blaustichiger und
   dunkler als das Anthrazit der Schwesterseite, deshalb hat diese
   Seite einen eigenen Grundton.

   Das Blau ist dunkel genug, dass WEISSE Schrift darauf steht. Bei
   KopfIdee78 ist es umgekehrt, dort liegt Anthrazit auf Gelb. Wer
   Bausteine zwischen den Seiten kopiert, muss das anfassen.

   Nicht verwechseln mit dem Patock-Blau #0091C8 der Immobilien-
   marken: das ist deutlich cyanlastiger.

   Schrift: Manrope (SIL Open Font License), lokal ausgeliefert,
   kein Google-CDN. Lizenz und Hinweis in schriften/.
   ============================================================ */

/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../schriften/Manrope-400-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../schriften/Manrope-400-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --anthrazit:   #080D18;   /* Marken-Schwarz aus dem Designset */
  --anthrazit-2: #121828;
  --anthrazit-3: #1E2739;
  --blau:      #0084F4;   /* Markenblau aus dem Designset */
  --blau-hell: #3FA6FF;   /* Hover und Text auf dunklem Grund */
  --blau-tief: #0067C2;
  --blau-fahl: #E8F2FF;   /* hinterlegte Flaechen auf Weiss */
  --weiss:       #FFFFFF;
  --papier:      #F6F8FB;
  --grau:        #5C6066;
  --grau-hell:   #E1E6ED;

  --breite: 1180px;
  --radius: 18px;
  --radius-klein: 12px;
  --schatten: 0 18px 50px rgba(8, 13, 24, .10);
  --schatten-stark: 0 24px 70px rgba(8, 13, 24, .18);

  --schrift: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 100px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 17px;
  line-height: 1.65;
  color: var(--anthrazit);
  background: var(--weiss);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.container { width: min(100% - 2.5rem, var(--breite)); margin-inline: auto; }

h1, h2, h3 { line-height: 1.14; letter-spacing: -.022em; margin: 0 0 .6rem; font-weight: 800; }
h1 { font-size: clamp(2.4rem, 6vw, 4.15rem); }
h2 { font-size: clamp(1.85rem, 3.9vw, 2.8rem); }
h3 { font-size: 1.24rem; letter-spacing: -.012em; }
p { margin: 0 0 1rem; }
.lead { font-size: clamp(1.05rem, 1.9vw, 1.28rem); color: var(--grau); max-width: 62ch; }

/* Der Kasten aus der Wortmarke, als wiederkehrendes Zeichen.
   Indigo ist dunkel, also steht WEISS darauf. */
.marker {
  background: var(--blau);
  color: var(--weiss);
  padding: .04em .26em .1em;
  border-radius: 10px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
/* Der Schlusspunkt steht meist auf Anthrazit. Das satte Blau verliert
   sich dort, deshalb der hellere Ton. */
.punkt { color: var(--blau-hell); }

/* ---------- Wortmarke ----------
   Seit dem 08.08.2026 liegt Mannis offizielles Designset vor
   (MeisterPlan78-Designset.zip). Die frueher hier gebaute Textfassung ist
   damit hinfaellig, es gilt die Originaldatei.

   Zwei Fassungen, weil das Logo je nach Untergrund wechselt:
     logo_weiss.webp   auf dunklem Grund, "Plan" in Weiss
     logo_dunkel.webp  auf hellem Grund,  "Plan" im Marken-Schwarz

   logo_weiss ist aus der inverse-Fassung des Sets freigestellt: die bringt
   einen eigenen schwarzen Kasten mit, der sich auf dem Verlauf des Hero
   sichtbar abzeichnen wuerde. Dieselbe Falle wie bei KopfIdee78. */
.wortmarke { display: inline-block; line-height: 0; text-decoration: none; }
/* Manni-Weisung 08.08.2026: das eigene Logo deutlich groesser.
   Die Kopfzeile ist dafuer von 76 auf 88 Pixel gewachsen. */
.wortmarke img { width: 268px; }
.fuss .wortmarke img { width: 210px; }
.person-bild .wortmarke img { width: 78%; }

/* ---------- Kopfzeile ---------- */
.kopf {
  position: sticky; top: 0; z-index: 60;
  background: rgba(8, 13, 24, .92);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.kopf.gescrollt { border-bottom-color: var(--anthrazit-3); }
.kopf-innen { display: flex; align-items: center; gap: 1.5rem; height: 88px; }
.kopf .wortmarke { color: var(--weiss); }
.kopf-nav { display: flex; align-items: center; gap: 1.25rem; margin-left: auto; }
.kopf-nav a { white-space: nowrap; }
.kopf-nav a {
  color: #D9DBDE; text-decoration: none; font-weight: 600; font-size: .965rem;
  padding: .3rem 0; position: relative;
}
.kopf-nav a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: var(--blau-hell); transition: right .25s ease;
}
.kopf-nav a:hover { color: var(--weiss); }
.kopf-nav a:hover::after { right: 0; }
/* Muss spezifischer sein als ".kopf-nav a", sonst faerbt die Navigation den
   Knopftext grau ein. */
.kopf-nav a.knopf { margin-left: .4rem; color: var(--weiss); }
.kopf-nav a.knopf::after { display: none; }

/* Menuepunkt zur Schwestermarke. Traegt das farbige Zeichen, damit man die
   andere Marke im Menue erkennt, bleibt aber kleiner und ruhiger als die
   eigenen Punkte. Fuehrt zum Block auf der Seite, nicht direkt hinaus.

   display: inline-flex ist hier wichtig. Ohne das steht das Zeichen als
   eigener Block ueber dem Text und der Menuepunkt wird zweizeilig. */
.kopf-nav a.nav-schwester {
  display: inline-flex; align-items: center; gap: .45rem;
  color: #9A9EA5; font-weight: 700; font-size: .9rem;
  padding: .3rem 0 .3rem .8rem; margin-left: .2rem; white-space: nowrap;
  border-left: 1px solid var(--anthrazit-3);
}
.kopf-nav a.nav-schwester:hover { color: var(--weiss); }
.kopf-nav a.nav-schwester::after { display: none; }
.kopf-nav a.nav-schwester img { width: 20px; height: 20px; border-radius: 5px; flex: none; }

.burger {
  display: none; margin-left: auto; background: none; border: 0; cursor: pointer;
  width: 44px; height: 44px; padding: 10px; color: var(--weiss);
}
.burger span { display: block; height: 2px; background: currentColor; border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
.burger span + span { margin-top: 6px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- Knoepfe ---------- */
.knopf {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .82rem 1.5rem; border-radius: 999px; border: 2px solid transparent;
  font-family: inherit; font-weight: 800; font-size: 1rem; text-decoration: none;
  cursor: pointer; white-space: nowrap;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.knopf-blau { background: var(--blau); color: var(--weiss); }
.knopf-blau:hover { background: var(--blau-hell); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 132, 244, .40); }
.knopf-dunkel { background: var(--anthrazit); color: var(--weiss); }
.knopf-dunkel:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(8, 13, 24, .28); }
.knopf-rand { border-color: rgba(255, 255, 255, .28); color: var(--weiss); }
.knopf-rand:hover { border-color: var(--blau-hell); color: var(--blau-hell); }
.knopf-rand-dunkel { border-color: var(--anthrazit); color: var(--anthrazit); }
.knopf-rand-dunkel:hover { background: var(--anthrazit); color: var(--weiss); }
.knopf-klein { padding: .6rem 1.15rem; font-size: .93rem; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background: var(--anthrazit); color: var(--weiss);
  padding: clamp(4rem, 9vw, 7.5rem) 0 clamp(4.5rem, 9vw, 7rem);
}
.hero::before {
  content: ''; position: absolute; inset: auto auto -30% -12%;
  width: 640px; height: 640px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 132, 244, .22) 0%, rgba(0, 132, 244, 0) 68%);
  pointer-events: none;
}
.hero::after {
  content: ''; position: absolute; inset: -22% -14% auto auto;
  width: 720px; height: 720px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 132, 244, .16) 0%, rgba(0, 132, 244, 0) 66%);
  pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }
/* Mehr Zeilenabstand als sonst: der Marker ist ein Kasten und schrammt bei
   1.14 an der naechsten Zeile entlang.
   Die Zeile ist mit "Wir programmieren, was Sie wirklich brauchen" laenger als
   bei der Schwesterseite. Deshalb etwas kleiner und breiter gesetzt, sonst
   steht "Wir" allein in der ersten Zeile und der Marker zerfaellt auf zwei. */
.hero h1 {
  color: var(--weiss); max-width: 21ch; line-height: 1.22;
  font-size: clamp(2.15rem, 4.6vw, 3.45rem);
}
.hero .lead { color: #B9BCC1; margin-top: 1.4rem; }

.augenbraue {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .82rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: var(--blau-hell); margin-bottom: 1.5rem;
}
.augenbraue::before { content: ''; width: 30px; height: 2px; background: currentColor; border-radius: 2px; }

.hero-knoepfe { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2.3rem; }

.hero-innen { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
@media (min-width: 940px) {
  .hero-innen { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
  .hero-marken { grid-column: 1 / -1; }
}

.hero-marken {
  display: flex; flex-wrap: wrap; gap: .55rem 1.9rem; margin-top: 1rem;
  padding-top: 1.9rem; border-top: 1px solid var(--anthrazit-3);
  color: #9A9EA5; font-size: .93rem; font-weight: 600;
}
.hero-marken span { display: inline-flex; align-items: center; gap: .5rem; }
.hero-marken span::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--blau-hell); flex: none; }

/* ---------- Das Projektfenster im Hero ----------
   Statt eines schwebenden Zeichens wie bei der Schwesterseite zeigt
   Meisterplan78 ein Stueck Arbeit: eine Aufgabenliste, drei Punkte erledigt,
   einer laeuft. Das ist das Versprechen der Marke in einem Bild. */
.fenster {
  position: relative; width: 100%; max-width: 480px; margin-inline: auto;
  background: var(--anthrazit-2); border: 1px solid var(--anthrazit-3);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 34px 80px rgba(0, 0, 0, .5);
}
.fenster-leiste {
  display: flex; align-items: center; gap: .45rem;
  padding: .85rem 1.1rem; border-bottom: 1px solid var(--anthrazit-3);
  background: rgba(255, 255, 255, .02);
}
.fenster-leiste i { width: 10px; height: 10px; border-radius: 50%; background: #3A3E45; }
.fenster-leiste i:first-child { background: var(--blau); }
.fenster-titel { margin-left: .6rem; font-size: .84rem; color: #8E9299; font-weight: 700; font-style: normal; }
.fenster-liste { list-style: none; margin: 0; padding: 1.1rem 1.1rem 1.3rem; }
.fenster-liste li {
  display: flex; align-items: center; gap: .8rem;
  padding: .72rem .2rem; border-bottom: 1px solid rgba(255, 255, 255, .05);
  font-size: .95rem; color: #C4C7CB;
}
.fenster-liste li:last-child { border-bottom: 0; }
.haken {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: var(--blau); color: var(--weiss);
  display: grid; place-items: center;
}
.haken svg { width: 13px; height: 13px; }
.haken-offen { background: transparent; border: 2px dashed #4A4E55; }
.fenster-liste li.laeuft { color: var(--weiss); font-weight: 700; }
.balken { height: 5px; border-radius: 999px; background: #33373E; margin: .9rem .2rem .2rem; overflow: hidden; }
.balken i { display: block; height: 100%; width: 72%; border-radius: 999px; background: var(--blau); }
.fenster-fuss { display: flex; justify-content: space-between; font-size: .8rem; color: #8E9299; padding: 0 .2rem; }

/* ---------- Sektionen ---------- */
.sektion { padding: clamp(3.8rem, 8vw, 6.5rem) 0; }
.sektion-papier { background: var(--papier); }
.sektion-dunkel { background: var(--anthrazit); color: var(--weiss); }
.sektion-dunkel .lead { color: #B9BCC1; }
.sektion-kopf { max-width: 64ch; margin-bottom: clamp(2.2rem, 4vw, 3.4rem); }
.sektion-kopf.mitte { margin-inline: auto; text-align: center; }
.sektion-kopf.mitte .lead { margin-inline: auto; }
.augenbraue-dunkel { color: var(--blau-tief); }

/* ---------- Leistungen ---------- */
.raster { display: grid; gap: 1.15rem; grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); counter-reset: karte; }
.karte {
  background: var(--weiss); border: 1px solid var(--grau-hell); border-radius: var(--radius);
  padding: 2rem 1.75rem 1.85rem; position: relative; overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.karte::before {
  content: ''; position: absolute; left: 0; top: 0; height: 4px; width: 0;
  background: var(--blau); transition: width .3s ease;
}
.karte::after {
  counter-increment: karte; content: counter(karte, decimal-leading-zero);
  position: absolute; top: 1.15rem; right: 1.35rem;
  font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em;
  color: var(--grau-hell); transition: color .22s ease;
}
.karte:hover { transform: translateY(-4px); box-shadow: var(--schatten); border-color: #D0D0D8; }
.karte:hover::before { width: 100%; }
.karte:hover::after { color: var(--blau); }
.karte h3 { margin-bottom: .5rem; }
.karte p { color: var(--grau); font-size: .985rem; margin: 0; }

.karten-symbol {
  width: 54px; height: 54px; border-radius: 15px;
  background: var(--blau); color: var(--weiss);
  display: grid; place-items: center; margin-bottom: 1.25rem;
  box-shadow: 0 8px 20px rgba(0, 132, 244, .34);
  transition: transform .22s ease;
}
.karte:hover .karten-symbol { transform: rotate(-6deg) scale(1.06); }
.karten-symbol svg { width: 27px; height: 27px; }

/* ---------- Argumente auf dunklem Grund ---------- */
.arg-raster { display: grid; gap: 1.15rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.arg {
  background: var(--anthrazit-2); border: 1px solid var(--anthrazit-3);
  border-radius: var(--radius); padding: 1.9rem 1.7rem;
}
.arg h3 { color: var(--weiss); }
.arg p { color: #A8ACB2; font-size: .98rem; margin: 0; }
.arg-zahl { font-size: 2.1rem; font-weight: 800; color: var(--blau-hell); line-height: 1; margin-bottom: .9rem; letter-spacing: -.03em; }

/* ---------- Werkzeugkasten ----------
   Eigener Baustein dieser Seite: was tatsaechlich eingesetzt wird. Bei einer
   Umsetzungsmarke ist das eine Information, keine Angeberei. */
.werkzeuge { display: flex; flex-wrap: wrap; gap: .6rem; }
.werkzeug {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--weiss); border: 1px solid var(--grau-hell);
  border-radius: 999px; padding: .55rem 1.05rem;
  font-size: .93rem; font-weight: 700; color: var(--anthrazit);
}
.werkzeug::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--blau); flex: none; }
.werkzeug-hinweis { margin-top: 1.6rem; font-size: .95rem; color: var(--grau); max-width: 60ch; }

/* ---------- Ablauf ---------- */
.ablauf { display: grid; gap: 1.15rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); counter-reset: schritt; }
.schritt { position: relative; padding-top: 2.9rem; }
.schritt::before {
  counter-increment: schritt; content: counter(schritt);
  position: absolute; top: 0; left: 0;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--blau); color: var(--weiss);
  display: grid; place-items: center; font-weight: 800; font-size: 1.05rem;
}
.schritt::after {
  content: ''; position: absolute; top: 20px; left: 54px; right: -1.15rem; height: 2px;
  background: repeating-linear-gradient(to right, var(--grau-hell) 0 8px, transparent 8px 15px);
}
.schritt:last-child::after { display: none; }
.schritt h3 { margin-bottom: .4rem; }
.schritt p { color: var(--grau); font-size: .97rem; margin: 0; }

/* ---------- Ansprechpartner ---------- */
.person { display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 900px) { .person { grid-template-columns: 390px minmax(0, 1fr); } }
.person-bild {
  position: relative; overflow: hidden;
  background: var(--anthrazit); border-radius: var(--radius);
  display: grid; place-items: center; align-content: center; gap: 1.3rem;
  padding: 2.6rem 2rem; aspect-ratio: 1 / 1;
}
.person-bild::before {
  content: ''; position: absolute; inset: -35% -35% auto auto;
  width: 90%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 132, 244, .30) 0%, transparent 68%);
}
.person-bild::after {
  content: ''; position: absolute; inset: 12px; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .10);
}
.person-bild .wortmarke { position: relative; color: var(--weiss); font-size: clamp(1.5rem, 4vw, 2.05rem); }
.person-claim { position: relative; font-weight: 800; font-size: 1.02rem; letter-spacing: -.01em; color: #9A9EA5; }
.person-liste { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .65rem; }
.person-liste li { display: flex; gap: .75rem; align-items: flex-start; color: var(--grau); }
.person-liste svg { width: 20px; height: 20px; flex: none; margin-top: .28rem; color: var(--blau); }

/* ---------- Kontakt ---------- */
.kontakt-raster { display: grid; gap: clamp(2rem, 4vw, 3rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 940px) { .kontakt-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } }

.kontakt-wege { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; gap: 1rem; }
.kontakt-wege a, .kontakt-wege .weg {
  display: flex; gap: 1rem; align-items: center; text-decoration: none;
  background: var(--anthrazit-2); border: 1px solid var(--anthrazit-3);
  border-radius: var(--radius-klein); padding: 1.05rem 1.25rem;
  transition: border-color .2s ease, transform .2s ease;
}
.kontakt-wege a:hover { border-color: var(--blau-hell); transform: translateX(3px); }
.kontakt-wege svg { width: 22px; height: 22px; color: var(--blau-hell); flex: none; }
.kontakt-wege b { display: block; font-size: .8rem; letter-spacing: .09em; text-transform: uppercase; color: #8E9299; font-weight: 700; }
.kontakt-wege span { color: var(--weiss); font-weight: 700; }

.formular { background: var(--weiss); color: var(--anthrazit); border-radius: var(--radius); padding: clamp(1.6rem, 3vw, 2.4rem); box-shadow: var(--schatten-stark); }
.feld { margin-bottom: 1.05rem; }
.feld label { display: block; font-weight: 700; font-size: .92rem; margin-bottom: .38rem; }
.feld input, .feld select, .feld textarea {
  width: 100%; font-family: inherit; font-size: 1rem; color: var(--anthrazit);
  padding: .78rem .95rem; border: 1.5px solid var(--grau-hell); border-radius: var(--radius-klein);
  background: var(--weiss); transition: border-color .18s ease, box-shadow .18s ease;
}
.feld textarea { min-height: 130px; resize: vertical; }
.feld input:focus, .feld select:focus, .feld textarea:focus {
  outline: none; border-color: var(--blau); box-shadow: 0 0 0 3px rgba(0, 132, 244, .22);
}
.feld-zwei { display: grid; gap: 1.05rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 620px) { .feld-zwei { grid-template-columns: 1fr 1fr; } }
.feld-hinweis { font-size: .86rem; color: var(--grau); margin: .2rem 0 1.2rem; }
.feld-hinweis a { color: var(--anthrazit); }
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.banner { border-radius: var(--radius-klein); padding: 1rem 1.15rem; margin-bottom: 1.4rem; font-weight: 600; }
.banner-ok { background: #E9F7EC; border: 1px solid #B7E3C1; color: #17492A; }
.banner-fehler { background: #FDECEC; border: 1px solid #F3BDBD; color: #7A1F1F; }

/* ---------- Fusszeile ---------- */
.fuss { background: var(--anthrazit); color: #8E9299; padding: 3.2rem 0 2.2rem; border-top: 1px solid var(--anthrazit-3); }
.fuss-innen { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: space-between; align-items: flex-start; }
.fuss .wortmarke { color: var(--weiss); margin-bottom: .9rem; }
.fuss-nav { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.fuss a { color: #C4C7CB; text-decoration: none; font-weight: 600; font-size: .95rem; }
.fuss a:hover { color: var(--blau-hell); }
.fuss-zeile { margin-top: 2.4rem; padding-top: 1.5rem; border-top: 1px solid var(--anthrazit-3); font-size: .88rem; display: flex; flex-wrap: wrap; gap: .8rem 1.5rem; justify-content: space-between; }
/* Die Schwesterseite: eine Zeile, kein grosser Auftritt, aber auffindbar. */
.fuss-schwester { color: #8E9299; }
.fuss-schwester a { color: var(--blau-hell); text-decoration: none; font-weight: 700; }
.fuss-schwester a:hover { text-decoration: underline; }

/* ---------- Unterseiten ---------- */
.seitenkopf { background: var(--anthrazit); color: var(--weiss); padding: clamp(3rem, 7vw, 5rem) 0 clamp(2.4rem, 5vw, 3.4rem); }
.seitenkopf h1 { font-size: clamp(2rem, 4.6vw, 3rem); }
.seitenkopf .wortmarke { color: var(--weiss); margin-bottom: 1.4rem; }
.text { padding: clamp(2.6rem, 6vw, 4.5rem) 0; }
.text .container { max-width: 780px; }
.text h2 { font-size: 1.45rem; margin-top: 2.4rem; }
.text p, .text li { color: #3B3E43; }
.text ul { padding-left: 1.2rem; }
.text a { color: var(--anthrazit); text-decoration: underline; text-decoration-color: var(--blau); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.text a:hover { color: var(--blau); }
.zurueck { display: inline-flex; align-items: center; gap: .5rem; color: var(--blau-hell); text-decoration: none; font-weight: 700; margin-bottom: 1.2rem; }
.zurueck:hover { text-decoration: underline; }


/* ============================================================
   SCHWESTERMARKE

   Manni-Weisung 08.08.2026: jede Seite bewirbt die andere, und zwar
   sichtbar auf der ersten Seite, nicht nur unten in der Fusszeile.
   Regel dabei: **das eigene Logo ist immer groesser, das fremde immer
   kleiner.** Deshalb zwei Auftritte in verschiedener Lautstaerke:

   Am 08.08.2026 gab es dafuer kurz einen Streifen ueber der Kopfzeile. Der
   ist wieder raus, Manni wollte kein Werbebanner. Stattdessen:

     .nav-schwester   ein Menuepunkt mit dem farbigen Zeichen der anderen Marke
     .schwesterkarte  ein eigener Block direkt nach den Leistungen

   WICHTIG beim Zeichen: es muss FARBIG sein (das gelbe KI-Quadrat bzw. das
   blaue MP-Quadrat), nicht die weisse Wortmarke. Die ist auf hellem Grund
   unsichtbar, genau das ist am 08.08.2026 passiert.
   ============================================================ */


.schwesterkarte {
  display: grid; gap: clamp(1.8rem, 4vw, 3rem); align-items: center;
  background: var(--weiss); border: 1px solid var(--grau-hell);
  border-radius: var(--radius); padding: clamp(1.8rem, 4vw, 3rem);
}
@media (min-width: 860px) {
  .schwesterkarte { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}
.sk-text h2 { margin-bottom: .8rem; }
.sk-text .lead { margin-bottom: 1.6rem; }
.sk-bild {
  display: grid; place-items: center; gap: .9rem; text-decoration: none;
  background: var(--anthrazit); border-radius: var(--radius-klein);
  padding: clamp(1.8rem, 4vw, 2.6rem) 1.5rem;
  transition: transform .2s ease, box-shadow .2s ease;
}
.sk-bild:hover { transform: translateY(-3px); box-shadow: var(--schatten); }
.sk-bild img { width: min(100%, 300px); }
.sk-bild span { color: #8E9299; font-size: .9rem; font-weight: 700; }


@media (max-width: 880px) {
  .burger { display: block; }
  .kopf-nav {
    position: fixed; inset: 88px 0 auto; flex-direction: column; gap: 0;
    background: var(--anthrazit); border-bottom: 1px solid var(--anthrazit-3);
    padding: .5rem 1.25rem 1.4rem; margin: 0;
    transform: translateY(-130%); transition: transform .28s ease; z-index: 55;
  }
  .kopf-nav.offen { transform: translateY(0); }
  .kopf-nav a { padding: .95rem .25rem; border-bottom: 1px solid var(--anthrazit-3); font-size: 1.05rem; }
  .kopf-nav a::after { display: none; }
  /* nav-schwester im mobilen Menue: der Trennstrich links passt dort
     nicht, die Punkte stehen ja untereinander. */
  .kopf-nav a.nav-schwester { border-left: 0; padding-left: .25rem; margin-left: 0; font-size: 1rem; }
  .kopf-nav .knopf { margin: 1rem 0 0; justify-content: center; }
  .schritt::after { display: none; }
  .hero-marken { gap: .5rem 1.2rem; }
  /* Logo auf dem Handy etwas zurueckgenommen, sonst bleibt neben dem
     Burger-Knopf kein Platz. */
  .wortmarke img { width: 190px; }
}