/* DACH-BAU RUF - gemeinsames Stylesheet fuer alle Seiten.
   Farben gemessen auf dachbauruf.de: Rot #E31E24, Text #2B2A29, Grund Weiss.
   Wer hier etwas aendert, aendert es auf jeder Seite. */

/* Selbst gehostete Schriften.
   Grund: Google Fonts von Googles Servern zu laden uebertraegt die IP
   jedes Besuchers in die USA. Das LG Muenchen hat das 2022 als DSGVO-
   Verstoss gewertet (Az. 3 O 17493/20). Lokal eingebunden entfaellt das,
   und eine blockierende Fremdanfrage weniger macht die Seite schneller.
   Archivo und IBM Plex stehen unter der SIL Open Font License,
   Selbsthosting ist ausdruecklich erlaubt.
   Nur latin und latin-ext, das reicht fuer Deutsch. */

/* Archivo 600, latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(schrift/archivo-600-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;
}

/* Archivo 600, latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(schrift/archivo-600-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;
}

/* Archivo 700, latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(schrift/archivo-600-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;
}

/* Archivo 700, latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(schrift/archivo-600-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;
}

/* Archivo 800, latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(schrift/archivo-600-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;
}

/* Archivo 800, latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(schrift/archivo-600-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;
}

/* IBM Plex Mono 500, latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(schrift/ibm-plex-mono-500-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;
}

/* IBM Plex Mono 500, latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(schrift/ibm-plex-mono-500-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;
}

/* IBM Plex Mono 600, latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(schrift/ibm-plex-mono-600-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;
}

/* IBM Plex Mono 600, latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(schrift/ibm-plex-mono-600-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;
}

/* IBM Plex Sans 400, latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(schrift/ibm-plex-sans-400-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;
}

/* IBM Plex Sans 400, latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(schrift/ibm-plex-sans-400-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;
}

/* IBM Plex Sans 500, latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(schrift/ibm-plex-sans-400-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;
}

/* IBM Plex Sans 500, latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(schrift/ibm-plex-sans-400-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;
}

/* IBM Plex Sans 600, latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(schrift/ibm-plex-sans-400-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;
}

/* IBM Plex Sans 600, latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(schrift/ibm-plex-sans-400-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;
}


  /* ============================================================
     DACH-BAU RUF - Landingpage "Freie Kapazitäten"
     Tokens durchgängig aus der Karriereseite übernommen,
     damit beide Seiten als eine Marke lesen.
     Radius-System: durchgehend 3px. Ein Akzent: Rot.
     ============================================================ */
  :root{
    color-scheme: light;

    /* Werte gemessen auf dachbauruf.de und aus dem Logo,
       nicht geschaetzt. Rot #E31E24, Text #2B2A29, Grund Weiss. */
    --grund:#FFFFFF;
    --grund-2:#F5F5F5;
    --flaeche:#FFFFFF;
    --ink:#2B2A29;
    --ink-2:#5A5957;
    --ink-3:#6F6E6C;
    --line:#E5E5E5;
    --line-2:#D2D2D2;

    --rot:#E31E24;          /* CI-Rot. Weiss darauf: 4.7:1 */
    --rot-text:#E31E24;     /* dasselbe Rot als Textfarbe, nicht abgedunkelt */
    --rot-hover:#C4161B;
    --rot-blass:#FEF2F0;    /* heller Rotton von dachbauruf.de */

    --belegt-flaeche:#ECECEC;
    --belegt-text:#5C5C5C;

    --radius:3px;
    --shadow:0 1px 2px rgba(28,28,28,.05), 0 14px 34px -20px rgba(28,28,28,.4);
    --shadow-lift:0 1px 2px rgba(28,28,28,.06), 0 22px 44px -22px rgba(28,28,28,.45);

    /* Kräftigere Kurven als die CSS-Defaults. */
    --ease-out:cubic-bezier(.23,1,.32,1);
    --ease-in-out:cubic-bezier(.77,0,.175,1);
  }

*{box-sizing:border-box}
  html{scroll-behavior:smooth;scroll-padding-top:5.5rem}
  @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

  body{
    margin:0;
    background:var(--grund);
    color:var(--ink);
    font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    font-size:17px;line-height:1.6;
    -webkit-font-smoothing:antialiased;
    padding-bottom:72px;
  }
  @media (min-width:860px){ body{padding-bottom:0} }

  h1,h2,h3{font-family:Archivo,"IBM Plex Sans",sans-serif;text-wrap:balance;margin:0;line-height:1.07;letter-spacing:-.022em;color:var(--ink)}
  h1{font-weight:800;font-size:clamp(1.8rem,4.25vw,3.1rem)}
  h2{font-weight:700;font-size:clamp(1.65rem,4vw,2.5rem)}
  h3{font-weight:700;font-size:1.13rem;line-height:1.25;letter-spacing:-.01em}
  p{margin:0}
  a{color:inherit}
  img{max-width:100%;display:block;height:auto}
  /* picture darf keine eigene Box aufmachen, sonst wird nicht mehr das
     Bild zum Raster- oder Flex-Element, sondern der Wrapper. Dann wird
     aber auch <source> zum Rasterelement und schiebt das Bild eine
     Spalte weiter, deshalb muss es ausdruecklich verschwinden. */
  picture{display:contents}
  picture source{display:none}
  ul{margin:0;padding:0;list-style:none}

  .wrap{max-width:70rem;margin-inline:auto;padding-inline:20px}
  .narrow{max-width:44rem}
  section{padding-block:clamp(3.2rem,7vw,5.5rem)}

  .skip{
    position:absolute;left:-9999px;top:0;z-index:100;
    background:var(--rot);color:#fff;padding:.8rem 1.2rem;font-weight:600;
  }
  .skip:focus{left:0}

  a:focus-visible,button:focus-visible,input:focus-visible,
  select:focus-visible,textarea:focus-visible,summary:focus-visible{
    outline:3px solid var(--rot-text);outline-offset:3px;border-radius:var(--radius);
  }

  .eyebrow{
    font-family:"IBM Plex Mono",ui-monospace,monospace;
    font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
    color:var(--ink-3);display:flex;align-items:center;gap:.7rem;margin-bottom:1.05rem;
  }
  .eyebrow::before{content:"";width:1.6rem;height:3px;background:var(--rot);flex:none}

  .lead{color:var(--ink-2);font-size:1.08rem;max-width:56ch}

  /* ---------- Kopfzeile ---------- */
  .topbar{
    background:var(--flaeche);border-bottom:1px solid var(--line);
    position:sticky;top:0;z-index:40;
  }
  /* Am Handy klebt die Kopfzeile nicht oben. Die Aktionsleiste unten
     haelt Anrufen und WhatsApp ohnehin dauerhaft bereit, und so bleibt
     der knappe Bildschirm dem Inhalt. */
  @media (max-width:999px){ .topbar{position:static} }
  .topbar .wrap{
    display:flex;align-items:center;gap:1.2rem;
    padding-block:.65rem;min-height:64px;
  }
  @media (max-width:999px){
    .topbar .wrap{flex-wrap:wrap;gap:.6rem .9rem;padding-bottom:0;min-height:0}
    .topbar .tel{order:1;margin-left:auto}
    .menue{margin-left:0}
  }
  .brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;min-width:0;margin-right:auto}
  .brand img{width:46px;height:46px;flex:none}
  .brand .name{font-family:Archivo,sans-serif;font-weight:800;font-size:.97rem;line-height:1.2}
  .brand .sub{font-family:"IBM Plex Mono",monospace;font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
  .brand .txt{display:none}
  @media (min-width:560px){ .brand .txt{display:block} }

  .navlinks{display:flex;gap:1.6rem;align-items:center}

  /* ---------- Klappmenue am Handy ----------
     Der Knopf erscheint erst unter 1000px. Zugeklappt wird die
     Navigation nur, wenn das Kopfskript gelaufen ist (html.js), sonst
     bliebe sie ohne JavaScript fuer immer verborgen. */
  .menue{
    display:none;align-items:center;justify-content:center;
    width:44px;height:44px;margin-left:auto;flex:none;
    background:none;border:1px solid var(--line-2);border-radius:var(--radius);
    cursor:pointer;color:var(--ink);
    transition:border-color 160ms ease, transform 160ms var(--ease-out);
  }
  .menue:active{transform:scale(.95)}
  @media (hover:hover) and (pointer:fine){ .menue:hover{border-color:var(--ink-3)} }

  /* Drei Striche aus einem Element: der mittlere ist der Koerper,
     die aeusseren sind Pseudoelemente. */
  .menue-striche,
  .menue-striche::before,
  .menue-striche::after{
    display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;
    transition:transform 220ms var(--ease-out), opacity 140ms ease;
  }
  .menue-striche{position:relative}
  .menue-striche::before,
  .menue-striche::after{content:"";position:absolute;left:0}
  .menue-striche::before{top:-6px}
  .menue-striche::after{top:6px}
  /* Aufgeklappt wird daraus ein Kreuz. */
  .menue[aria-expanded="true"] .menue-striche{background:transparent}
  .menue[aria-expanded="true"] .menue-striche::before{transform:translateY(6px) rotate(45deg)}
  .menue[aria-expanded="true"] .menue-striche::after{transform:translateY(-6px) rotate(-45deg)}

  @media (max-width:999px){
    .menue{display:inline-flex;order:2}
    .navlinks{
      order:4;width:100%;flex-direction:column;align-items:stretch;gap:0;
      border-top:1px solid var(--line);margin-top:.55rem;
    }
    .navlinks a{
      display:flex;align-items:center;min-height:52px;
      font-size:1.02rem;font-weight:600;
      border-bottom:1px solid var(--line);
    }
    .navlinks a:last-child{border-bottom:0}
    .navlinks a[aria-current="page"]{color:var(--rot-text)}
    /* Nur zuklappen, wenn das Skript es auch wieder aufklappen kann. */
    html.js .navlinks{display:none}
    html.js .navlinks[data-offen="1"]{display:flex}
  }
  .navlinks a{
    text-decoration:none;font-size:.93rem;font-weight:500;color:var(--ink-2);
    white-space:nowrap;transition:color 140ms ease;
  }
  .topbar .tel{
    font-family:Archivo,sans-serif;font-weight:700;font-size:.95rem;
    text-decoration:none;color:var(--rot-text);white-space:nowrap;
    display:inline-flex;align-items:center;min-height:44px;
  }
  .topbar .btn{padding:.6rem 1.05rem;font-size:.92rem}
  @media (max-width:559px){ .topbar .btn{display:none} }

  /* ---------- Buttons ---------- */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
    font-family:Archivo,sans-serif;font-weight:700;font-size:1.01rem;letter-spacing:-.01em;
    padding:.92rem 1.5rem;border-radius:var(--radius);text-decoration:none;
    border:2px solid transparent;cursor:pointer;white-space:nowrap;
    transition:background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 160ms var(--ease-out);
  }
  .btn-primary{background:var(--rot);color:#fff}
  .btn-outline{border-color:var(--line-2);color:var(--ink);background:var(--flaeche)}
  .btn:active{transform:scale(.97)}
  .btn svg{flex:none}
  @media (hover:hover) and (pointer:fine){
    .btn-primary:hover{background:var(--rot-hover)}
    .btn-outline:hover{border-color:var(--ink)}
    .navlinks a:hover{color:var(--rot-text)}
  }
  .btn[disabled]{opacity:.62;cursor:progress}

  /* ---------- Hero: asymmetrischer Split ---------- */
  .hero{padding-block:clamp(2.4rem,5vw,4.2rem) clamp(3rem,6vw,4.8rem);background:var(--flaeche);border-bottom:1px solid var(--line)}
  .hero-grid{display:grid;gap:clamp(1.8rem,4vw,3.2rem);align-items:center}
  @media (min-width:900px){ .hero-grid{grid-template-columns:1.16fr .84fr} }
  .hero h1{margin-bottom:1.15rem}
  .hero .lead{font-size:1.13rem;max-width:36ch}
  .hero-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.9rem}
  .hero-cta .btn{flex:1 1 auto;min-width:min(100%,14rem)}
  @media (min-width:520px){ .hero-cta .btn{flex:0 0 auto} }

  .hero-shot{position:relative}
  .hero-shot img{
    width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
    border-radius:var(--radius);box-shadow:var(--shadow-lift);
  }
  /* Ab Desktop feste Hoehe statt Seitenverhaeltnis: so passt der Hero
     auch auf ein 13-Zoll-Notebook, ohne dass der CTA unter die Kante rutscht. */
  @media (min-width:900px){
    .hero-shot img{aspect-ratio:auto;height:clamp(24rem,54vh,34rem)}
  }
  /* Der Versatz nach links funktioniert nur am Desktop. Am Handy liegt
     das Bild ohnehin am Rand, dann klebt der Stempel am Displayrand. */
  .hero-stamp{
    position:absolute;left:0;bottom:1.4rem;transform:translateX(-12px);
    background:var(--rot);color:#fff;border-radius:var(--radius);
    padding:.75rem 1.05rem;box-shadow:var(--shadow);
    font-family:"IBM Plex Mono",monospace;font-size:.74rem;font-weight:600;
    letter-spacing:.1em;text-transform:uppercase;line-height:1.45;
  }
  .hero-stamp strong{display:block;font-family:Archivo,sans-serif;font-size:1.32rem;letter-spacing:-.01em;text-transform:none}
  @media (max-width:559px){
    .hero-stamp{transform:none;left:0;bottom:0;border-radius:0 var(--radius) 0 0}
  }

  /* Schmaler Hero ohne Bild, fuer Seiten ohne passendes Foto. */
  .hero-schmal .hero-cta{margin-top:1.7rem}
  .hero-schmal .lead{max-width:52ch}

  /* Fristenblock auf den Unterseiten, mit grauem Band abgesetzt. */
  .fristen-kurz{background:var(--grund-2);border-block:1px solid var(--line)}
  .fristen-kurz .fristen{margin-top:2.2rem}

  /* ---------- Fristen ----------
     Linke Kante statt Oberkante und grosse Zahlen, damit sich der
     Block klar vom Ablauf weiter unten unterscheidet. */
  .fristen{display:grid;gap:1.9rem;margin-top:2.6rem}
  /* Spaltenbreiten nach Textlaenge verteilt und Umbruch verboten,
     damit die drei Unterzeilen exakt auf einer Hoehe stehen. */
  @media (min-width:820px){
    .fristen{grid-template-columns:.9fr 1.2fr 1fr;gap:2.2rem}
    .fristen b{white-space:nowrap}
  }
  .fristen > div{border-left:3px solid var(--rot);padding-left:1.25rem}
  .fristen b{
    display:block;font-family:Archivo,sans-serif;font-weight:800;
    font-size:clamp(1.8rem,3.1vw,2.4rem);line-height:1.05;letter-spacing:-.025em;
    color:var(--ink);margin-bottom:.5rem;
  }
  .fristen h3{font-size:1rem;margin-bottom:.5rem}
  .fristen p{color:var(--ink-2);font-size:.95rem;max-width:34ch}

  /* Faengt die Leute ab, die bei "2 bis 5 Wochen" abspringen wuerden.
     Gleiche linke Kante wie die Zeitwerte, damit es dazugehoert. */
  .notfall{
    margin-top:clamp(2rem,4vw,2.8rem);
    background:var(--rot-blass);border-left:3px solid var(--rot);
    border-radius:0 var(--radius) var(--radius) 0;
    padding:1.3rem 1.4rem;display:grid;gap:1.1rem;align-items:center;
  }
  @media (min-width:760px){ .notfall{grid-template-columns:1fr auto;gap:1.8rem;padding:1.5rem 1.7rem} }
  .notfall h3{margin-bottom:.4rem}
  .notfall p{color:var(--ink-2);font-size:.96rem;max-width:56ch}
  .notfall p b{font-weight:600;color:var(--ink)}
  .notfall .btn{white-space:nowrap}

  /* ---------- Leistungen: asymmetrisches Raster ---------- */
  .leist{display:grid;gap:14px}
  @media (min-width:900px){
    .leist{grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(0,auto)}
    .l-a{grid-column:1 / 7;grid-row:1}
    .l-b{grid-column:7 / 13;grid-row:1;justify-content:center}
    .l-d{grid-column:1 / 13;grid-row:2}
  }
  .karte{
    border-radius:var(--radius);border:1px solid var(--line);
    background:var(--flaeche);overflow:hidden;display:flex;flex-direction:column;
    transition:box-shadow 220ms var(--ease-out), transform 220ms var(--ease-out);
  }
  @media (hover:hover) and (pointer:fine){
    .karte-bild:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
  }
  .karte-txt{padding:1.5rem 1.5rem 1.6rem}
  .karte-txt h3{margin-bottom:.55rem}
  .karte-txt p{color:var(--ink-2);font-size:.97rem;max-width:48ch}
  .karte figure{margin:0;overflow:hidden;background:var(--grund-2)}
  .karte figure img{width:100%;height:100%;object-fit:cover}
  .l-a figure{flex:1 1 auto;min-height:260px}
  .l-d{flex-direction:column}
  @media (min-width:900px){
    .l-d{flex-direction:row;align-items:stretch}
    .l-d figure{flex:0 0 48%}
    .l-d .karte-txt{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;padding-block:2rem}
  }
  .l-d figure img{height:auto;aspect-ratio:16/10}
  @media (min-width:900px){ .l-d figure img{aspect-ratio:auto;height:100%;min-height:18rem} }
  /* Deckel fuer das hochformatige Motiv der ersten Karte. Ohne ihn
     waechst es auf seine natuerliche Hoehe und reisst die Zeile auf.
     Muss hinter .karte figure img stehen, gleiche Spezifitaet. */
  @media (min-width:900px){ .l-a figure img{height:clamp(17rem,24vw,22rem)} }
  .karte-tint{background:var(--grund-2);border-color:var(--line-2)}
  .karte-liste{margin-top:1rem;display:flex;flex-wrap:wrap;gap:.45rem}
  .karte-liste li{
    font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
    color:var(--ink-2);background:var(--grund);border:1px solid var(--line-2);
    padding:.3rem .55rem;border-radius:2px;
  }
  .karte-tint .karte-liste li{background:var(--flaeche)}
  /* Weiterfuehrender Link aus einer Leistungskarte auf die Unterseite. */
  .mehr{
    display:inline-flex;align-items:center;gap:.4rem;margin-top:1.1rem;
    font-family:Archivo,sans-serif;font-weight:700;font-size:.95rem;
    color:var(--ink);text-decoration:none;
    border-bottom:2px solid var(--rot);transition:border-color 160ms ease;
  }
  .mehr::after{content:"\203A";font-size:1.15em;line-height:1}
  @media (max-width:759px){ .mehr{padding-block:.55rem;min-height:44px} }
  @media (hover:hover) and (pointer:fine){ .mehr:hover{border-bottom-color:var(--ink)} }

  /* ---------- Ablauf ---------- */
  .ablauf{background:var(--grund-2);border-block:1px solid var(--line)}
  .schritte{display:grid;gap:0;margin-top:2.2rem;counter-reset:s}
  @media (min-width:900px){ .schritte{grid-template-columns:repeat(4,1fr);gap:1.6rem} }
  .schritt{padding:1.5rem 0;border-top:2px solid var(--rot)}
  @media (min-width:900px){ .schritt{padding:1.6rem 0 0} }
  .schritt h3{margin-bottom:.5rem}
  .schritt p{color:var(--ink-2);font-size:.96rem;max-width:34ch}
  .schritt-marke{
    font-family:"IBM Plex Mono",monospace;font-size:.72rem;font-weight:600;
    letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);
    display:block;margin-bottom:.7rem;
  }

  /* ---------- Icon-Liste (B2B, Merkmale, Leistungen) ---------- */
  .icon-liste{display:grid;gap:1.6rem 2.4rem;margin-top:2.4rem}
  @media (min-width:760px){ .icon-liste{grid-template-columns:1fr 1fr} }
  .icon-liste h3{font-size:1.02rem;margin-bottom:.35rem;display:flex;gap:.6rem;align-items:flex-start}
  .icon-liste h3 svg{flex:none;margin-top:.15rem;color:var(--rot-text)}
  .icon-liste p{color:var(--ink-2);font-size:.95rem;padding-left:1.95rem;max-width:40ch}

  /* ---------- Kundenstimmen ----------
     Senkrechte Trennlinien statt Karten, damit der Abschnitt sich vom
     Leistungsraster und vom Ablauf unterscheidet. */
  .stimmen{display:grid;gap:2rem;margin-top:2.6rem}
  @media (min-width:860px){
    .stimmen{grid-template-columns:repeat(3,1fr);gap:0}
    .stimmen .stimme{padding-inline:2rem;border-left:1px solid var(--line-2)}
    .stimmen .stimme:first-child{padding-left:0;border-left:0}
    .stimmen .stimme:last-child{padding-right:0}
  }
  .stimme{margin:0;position:relative}
  .stimme blockquote{
    margin:0;font-family:Archivo,sans-serif;font-weight:600;
    font-size:1.02rem;line-height:1.48;letter-spacing:-.01em;
    color:var(--ink);text-wrap:pretty;
  }
  .stimme blockquote::before{
    content:"\201E";display:block;font-family:Archivo,sans-serif;
    font-size:2.6rem;line-height:.6;color:var(--rot);margin-bottom:.45rem;
  }
  .stimme figcaption{margin-top:1.1rem;padding-top:.9rem;border-top:1px solid var(--line)}
  .stimme figcaption b{display:block;font-family:Archivo,sans-serif;font-size:.97rem;letter-spacing:-.01em}
  .stimme figcaption span{display:block;font-size:.88rem;color:var(--ink-2);margin-top:.15rem}
  .stimmen-fuss{margin-top:2.2rem}
  .stimmen-einzeln{max-width:44rem;margin-top:0}
  @media (min-width:860px){ .stimmen-einzeln{grid-template-columns:1fr} }

  /* ---------- Haeufige Fragen ----------
     <details> statt Skript: klappt auch ohne JavaScript und wird von
     Suchmaschinen als Text gelesen, nicht als versteckter Inhalt. */
  .fragen{margin-top:2.4rem;border-top:1px solid var(--line-2)}
  .frage{border-bottom:1px solid var(--line-2)}
  .frage summary{
    cursor:pointer;list-style:none;padding:1.15rem 2.5rem 1.15rem 0;position:relative;
    font-family:Archivo,sans-serif;font-weight:700;font-size:1.06rem;
    letter-spacing:-.01em;color:var(--ink);
  }
  .frage summary::-webkit-details-marker{display:none}
  .frage summary::after{
    content:"";position:absolute;right:.55rem;top:50%;
    width:.62rem;height:.62rem;margin-top:-.42rem;
    border-right:2.5px solid var(--rot);border-bottom:2.5px solid var(--rot);
    transform:rotate(45deg);transition:transform 200ms var(--ease-out);
  }
  .frage[open] summary::after{transform:rotate(-135deg);margin-top:-.16rem}
  .frage p{color:var(--ink-2);padding:0 2.5rem 1.35rem 0;max-width:68ch;margin-top:-.25rem}
  @media (hover:hover) and (pointer:fine){ .frage summary:hover{color:var(--rot-text)} }

  /* ---------- Meister ---------- */
  .meister{background:var(--flaeche);border-block:1px solid var(--line)}
  .meister-grid{display:grid;gap:clamp(1.8rem,4vw,3.4rem);align-items:center}
  @media (min-width:880px){ .meister-grid{grid-template-columns:1fr 1.1fr} }
  .meister-grid figure{margin:0}
  .meister-grid img{width:100%;height:auto;aspect-ratio:5/4;object-fit:cover;border-radius:var(--radius)}
  .meister-zitat{
    font-family:Archivo,sans-serif;font-weight:600;font-size:clamp(1.25rem,2.4vw,1.6rem);
    line-height:1.32;letter-spacing:-.015em;margin-bottom:1.3rem;text-wrap:balance;
  }
  .meister-name{font-size:.93rem;color:var(--ink-2);margin-bottom:1.6rem}
  .meister-name b{color:var(--ink);font-weight:600}
  .meister-fakten{display:grid;gap:.9rem;border-top:1px solid var(--line);padding-top:1.4rem}
  @media (min-width:600px){ .meister-fakten{grid-template-columns:1fr 1fr;gap:1.1rem 2rem} }
  .meister-fakten div b{display:block;font-family:Archivo,sans-serif;font-size:1.02rem;letter-spacing:-.01em}
  .meister-fakten div span{font-size:.9rem;color:var(--ink-2)}

  /* ---------- Team-Band ---------- */
  .band figure{margin:0}
  .band-bilder{display:grid;gap:14px}
  .band-bilder img{
    width:100%;height:auto;object-fit:cover;
    border-radius:var(--radius);background:var(--grund-2);
  }
  /* Hier ist <picture> ausdruecklich ein eigenes Kaestchen und damit das
     Rasterelement. Ueber display:contents loest sich height:100% nicht
     mehr gegen die feste Containerhoehe auf, das Bild wuchs auf seine
     natuerliche Groesse. */
  .band-bilder > picture{
    display:block;overflow:hidden;border-radius:var(--radius);
    background:var(--grund-2);
  }
  .band-bilder > picture img{border-radius:0}
  .band-bilder > picture:first-child img{aspect-ratio:3/2;object-position:50% 58%}
  .band-bilder > picture:last-child  img{aspect-ratio:4/3;object-position:50% 34%}
  /* Ab Tablet nebeneinander auf gleicher Hoehe. */
  @media (min-width:760px){
    .band-bilder{grid-template-columns:1.7fr 1fr;height:clamp(17rem,27vw,23rem)}
    .band-bilder > picture{height:100%}
    .band-bilder > picture:first-child img,
    .band-bilder > picture:last-child  img{height:100%;width:100%;aspect-ratio:auto}
  }
  .band figcaption{
    font-size:.88rem;color:var(--ink-3);margin-top:1rem;
  }
  .band-fakten{display:grid;gap:1.4rem;margin-top:clamp(3rem,5.5vw,4.75rem)}
  @media (min-width:760px){ .band-fakten{grid-template-columns:repeat(3,1fr);gap:2rem} }
  .band-fakten h3{margin-bottom:.4rem}
  .band-fakten p{color:var(--ink-2);font-size:.95rem;max-width:36ch}

  /* ---------- Anfrage ---------- */
  .anfrage{background:var(--grund-2);border-top:1px solid var(--line)}
  .anfrage-grid{display:grid;gap:clamp(2rem,4vw,3.4rem);align-items:start}
  @media (min-width:960px){ .anfrage-grid{grid-template-columns:.8fr 1.2fr} }

  .direkt{display:grid;gap:.75rem;margin-top:1.8rem}
  .direkt a{
    display:flex;align-items:center;gap:.85rem;text-decoration:none;
    background:var(--flaeche);border:1px solid var(--line);border-radius:var(--radius);
    padding:.95rem 1.1rem;
    transition:border-color 160ms ease, transform 160ms var(--ease-out);
  }
  .direkt a:active{transform:scale(.99)}
  @media (hover:hover) and (pointer:fine){ .direkt a:hover{border-color:var(--ink-3)} }
  .direkt svg{flex:none;color:var(--rot-text)}
  .direkt b{display:block;font-family:Archivo,sans-serif;font-size:1rem;letter-spacing:-.01em}
  .direkt span{display:block;font-size:.85rem;color:var(--ink-2)}

  form{background:var(--flaeche);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.3rem,3vw,2rem)}
  .feld{display:grid;gap:.45rem;margin-bottom:1.15rem}
  .feld-paar{display:grid;gap:1.15rem}
  @media (min-width:620px){ .feld-paar{grid-template-columns:1fr 1fr;gap:1.15rem 1.1rem} }
  label{font-weight:600;font-size:.92rem;color:var(--ink)}
  label .opt{font-weight:400;color:var(--ink-3)}
  .hilfe{font-size:.82rem;color:var(--ink-2)}
  input,select,textarea{
    font:inherit;font-size:1rem;color:var(--ink);
    background:var(--flaeche);border:1px solid var(--line-2);border-radius:var(--radius);
    padding:.75rem .85rem;width:100%;
    transition:border-color 150ms ease, box-shadow 150ms ease;
  }
  textarea{min-height:7.5rem;resize:vertical}
  input::placeholder,textarea::placeholder{color:var(--ink-3);opacity:1}
  input:hover,select:hover,textarea:hover{border-color:var(--ink-3)}
  .feld[data-fehler="1"] input,.feld[data-fehler="1"] select,.feld[data-fehler="1"] textarea{
    border-color:var(--rot-text);box-shadow:0 0 0 3px var(--rot-blass);
  }
  .fehler{font-size:.85rem;color:var(--rot-text);font-weight:500;display:none}
  .feld[data-fehler="1"] .fehler{display:block}

  .zustimmung{display:flex;gap:.7rem;align-items:flex-start;margin-bottom:1.4rem}
  .zustimmung input{width:1.35rem;height:1.35rem;flex:none;margin-top:.15rem;accent-color:var(--rot)}
  .zustimmung label{font-weight:400;font-size:.88rem;color:var(--ink-2);line-height:1.5}
  .zustimmung a{color:var(--rot-text);text-decoration:underline;text-underline-offset:2px}
  .zustimmung[data-fehler="1"] label{color:var(--rot-text)}

  /* Spamfalle. Nicht display:none, das erkennen Bots. Stattdessen aus
     dem Sichtfeld schieben und fuer Screenreader ausblenden. */
  .honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

  .form-banner{
    display:none;gap:.7rem;align-items:flex-start;
    border:1px solid var(--rot-text);background:var(--rot-blass);color:var(--ink);
    border-radius:var(--radius);padding:.9rem 1rem;margin-bottom:1.2rem;font-size:.93rem;
  }
  .form-banner[data-an="1"]{display:flex}

  .form-fertig{
    display:none;text-align:left;padding:.5rem 0;
  }
  .form-fertig[data-an="1"]{display:block}
  .form-fertig h3{font-size:1.4rem;margin-bottom:.7rem}
  .form-fertig p{color:var(--ink-2);margin-bottom:1.3rem;max-width:46ch}
  .form-inhalt[data-aus="1"]{display:none}

  /* ---------- Fußzeile ---------- */
  footer{background:var(--flaeche);border-top:1px solid var(--line);padding-block:2.8rem 2.4rem}
  .fuss-grid{display:grid;gap:2rem}
  @media (min-width:760px){ .fuss-grid{grid-template-columns:1.2fr 1fr 1fr} }
  .fuss-grid h3{font-size:.76rem;font-family:"IBM Plex Mono",monospace;font-weight:600;
    letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.9rem}
  .fuss-grid a{color:var(--ink-2);text-decoration:none;display:block;padding-block:.22rem;font-size:.95rem}
  /* Am Handy sind das Tippziele, keine Mauslinks. */
  @media (max-width:759px){
    .fuss-grid a{padding-block:.62rem;min-height:44px}
    /* Am Handy untereinander, nebeneinander bricht es krumm um. */
    .fuss-recht{flex-direction:column;align-items:flex-start;gap:0}
    .fuss-recht a{padding-block:.72rem;display:inline-block;min-height:44px}
    .fuss-recht span{padding-block:.35rem}
  }
  @media (hover:hover) and (pointer:fine){ .fuss-grid a:hover{color:var(--rot-text)} }
  .bildnachweis{
    margin-top:2.2rem;padding-top:1.4rem;border-top:1px solid var(--line);
    font-size:.82rem;color:var(--ink-3);max-width:70ch;
  }
  .bildnachweis a{color:var(--ink-3);text-decoration:underline;text-underline-offset:2px}
  .fuss-recht{
    margin-top:1.1rem;padding-top:0;
    display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;font-size:.86rem;color:var(--ink-3);
  }
  .fuss-recht a{color:var(--ink-3);text-decoration:none}

  /* ---------- Mobile Aktionsleiste ---------- */
  .mobilbar{
    position:fixed;left:0;right:0;bottom:0;z-index:50;
    display:grid;grid-template-columns:1fr 1fr;gap:1px;
    background:var(--line);border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom);
  }
  @media (min-width:860px){ .mobilbar{display:none} }
  .mobilbar a{
    display:flex;align-items:center;justify-content:center;gap:.5rem;
    background:var(--flaeche);color:var(--ink);text-decoration:none;
    font-family:Archivo,sans-serif;font-weight:700;font-size:.95rem;padding:1.05rem .5rem;
    transition:transform 160ms var(--ease-out);
  }
  .mobilbar a:active{transform:scale(.98)}
  .mobilbar .bar-primaer{background:var(--rot);color:#fff}
  .mobilbar svg{flex:none}

  /* =========================================================
     HANDY: eigener Rhythmus
     Am Desktop tragen Bento, Zeitleiste, Schrittfolge und Bildsplits
     die Abwechslung. Mobil klappt all das in dieselbe Form, und sieben
     weisse Abschnitte hintereinander ergeben eine endlose Textspalte.
     Deshalb hier: abwechselnde Flaechen als Kapitelgrenze, randlose
     Bilder als Blickfang, engere Abstaende.
     ========================================================= */
  @media (max-width:759px){

    /* Jeder zweite Abschnitt bekommt Flaeche. Man sieht sofort,
       wo ein Thema aufhoert und das naechste anfaengt. */
    main > section:nth-of-type(odd){background:var(--grund)}
    main > section:nth-of-type(even){background:var(--grund-2)}
    main > section{border-top:1px solid var(--line)}
    main > section:first-child{border-top:0}
    section{padding-block:2.6rem}

    /* Bilder bis an den Displayrand. In einer schmalen Spalte ist das
       der einzige Weg, ihnen Wirkung zu geben. */
    .hero-shot img,
    .meister-grid figure,
    .band-bilder{
      margin-inline:-20px;width:calc(100% + 40px);max-width:none;
    }
    .hero-shot img,
    .meister-grid img,
    .band-bilder img{border-radius:0}
    .hero-stamp{left:20px}
    .band-bilder{gap:2px}

    /* Zeitleiste: kompakter, die Zahl traegt, der Rest ordnet sich unter. */
    .fristen{gap:0}
    .fristen > div{
      border-left:0;border-top:2px solid var(--rot);
      padding:1.1rem 0 1.3rem;
    }
    .fristen > div:first-child{padding-top:.4rem}
    .fristen b{font-size:1.75rem;margin-bottom:.2rem}
    .fristen h3{font-size:.95rem;color:var(--ink-2);font-weight:600}
    .fristen p{margin-top:.5rem}

    /* Schrittfolge und Icon-Liste enger, sie standen sehr weit auseinander. */
    .schritte{gap:0}
    .schritt{padding:1.1rem 0}
    .icon-liste{gap:1.3rem}
    .icon-liste p{padding-left:1.7rem}

    /* ---------- Hero als Bildflaeche ----------
       Das Foto fuellt den ganzen Abschnitt, der Text liegt davor.

       Reihenfolge der Ebenen ist hier heikel: .hero-shot steckt im
       .wrap. Haengt man den Verlauf an .hero, liegt er ausserhalb
       dessen Stapelkontext und wird vom Bild uebermalt. Deshalb sitzt
       der Verlauf am Bild selbst, und der Textblock bekommt die
       hoechste Ebene innerhalb des .wrap.

       Der dunkle Verlauf ist nicht Deko, sondern Pflicht: ueber der
       hellsten Bildstelle braucht Weiss mindestens 0,84 Deckkraft fuer
       4,5:1. Im Textbereich liegen 0,90 bis 0,97. */
    main > section.hero{
      position:relative;overflow:hidden;
      background:#171717;border-bottom:0;padding-block:0;
    }
    .hero .wrap{
      position:relative;
      min-height:82svh;display:flex;flex-direction:column;justify-content:flex-end;
      padding-top:5rem;padding-bottom:2.3rem;
    }
    .hero .wrap > .reveal:first-child{position:relative;z-index:2}
    .hero-shot{position:absolute;inset:0;margin:0;z-index:1}
    .hero-shot img{
      margin:0;width:100%;height:100%;max-width:none;
      object-fit:cover;object-position:50% 50%;border-radius:0;
    }
    .hero-shot::after{
      content:"";position:absolute;inset:0;pointer-events:none;
      background:linear-gradient(180deg,
        rgba(23,23,23,0) 0%,
        rgba(23,23,23,.08) 24%,
        rgba(23,23,23,.87) 39%,
        rgba(23,23,23,.97) 100%);
    }
    .hero h1{color:#fff}
    .hero .eyebrow{color:#fff}
    .hero .lead{color:#E7E5E3;font-size:.97rem;max-width:30ch}
    .hero h1{margin-bottom:.85rem}
    .hero .eyebrow{margin-bottom:.8rem}
    .hero .hero-cta{margin-top:1.4rem;gap:.6rem}
    .hero .btn-outline{
      border-color:rgba(255,255,255,.55);color:#fff;background:transparent;
    }
    /* Das Schild wuerde den Text schneiden. Die Zusage steht ohnehin
       im naechsten Abschnitt noch einmal. */
    .hero-stamp{display:none}

    /* Vorspaenne duerfen am Handy nicht so breit atmen. */
    .lead{font-size:1rem}
    .karte-txt{padding:1.2rem 1.15rem 1.35rem}
  }

  /* ---------- Einblenden beim Scrollen ----------
     WICHTIG: Der Inhalt ist grundsaetzlich sichtbar. Das Ausblenden
     schaltet erst das Kopfskript zu, und nur wenn der Browser es auch
     wieder einblenden kann. Andersherum waere die ganze Seite leer,
     sobald das Skript, der IntersectionObserver oder eine Erweiterung
     streikt. Genau das ist vorher passiert. */
  .reveal{opacity:1}
  .anim .reveal{opacity:0;transform:translateY(14px)}
  .anim .reveal.sichtbar{
    opacity:1;transform:none;
    transition:opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
    transition-delay:calc(var(--i,0) * 55ms);
  }
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important}
  }