:root{
    --umber:#3D2F22;
    --umber-soft:#5B4936;
    --tan:#BC9E78;
    --tan-deep:#9A7C55;
    --tan-tint:#EFE3CE;
    --cream:#FBF6ED;
    --cream-2:#F5EEDF;
    --white:#FFFDF9;
    --rust:#A65634;
    --rust-deep:#8A452A;
    --sage:#707E5C;
    --line: rgba(61,47,34,0.14);
    --shadow: 0 20px 50px -25px rgba(61,47,34,0.35);
    --radius: 22px;
    --serif: 'Fraunces', 'Iowan Old Style', serif;
    --sans: 'Work Sans', system-ui, sans-serif;
    --mono: 'Space Mono', ui-monospace, monospace;
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  /* WICHTIG: overflow-x bewusst auf <html> statt auf <body> gesetzt.
     overflow (auch nur -x) auf einem Vorfahren von position:sticky-
     Elementen bricht deren "Kleben" in vielen mobilen Browsern,
     allen voran iOS Safari - das Menü blieb dadurch beim Scrollen
     nicht mehr oben stehen. */
  html{ overflow-x:hidden; }
  /* Scroll-Offset fuer Anker-Sprungmarken: gleicht die Hoehe des fixierten
     Headers (Topbar + Navigation) aus, damit Ueberschriften nach einem
     Klick auf Menuepunkte/Logo nicht darunter verschwinden bzw. der
     Sprung nicht zu weit/zu wenig scrollt. --header-total-h wird von
     tkUpdateStickyOffsets() im Script dynamisch berechnet.
     WICHTIG: Der Offset wird bewusst NUR ueber scroll-margin-top auf den
     Sprungzielen weiter unten gesetzt (main, section[id]) und NICHT
     zusaetzlich hier ueber scroll-padding-top - beide Eigenschaften
     addieren sich sonst und der Browser scrollt doppelt so weit wie
     noetig, wodurch alle Abschnitte ausser #home viel zu tief landen. */
  html{scroll-behavior:smooth;}
  body{
    font-family:var(--sans);
    background:var(--cream);
    color:var(--umber);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  
  html, body {
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}
  
  
  
  img{max-width:100%; display:block;}
  a{color:inherit; text-decoration:none;}
  ul{list-style:none;}
  section{position:relative;}
  /* Gleicher Scroll-Offset zusaetzlich direkt auf den Sprungzielen
     (main#home + alle Abschnitte mit id), als zuverlaessigere Ergaenzung
     zu scroll-padding-top oben - wirkt auch bei scrollIntoView() im JS. */
  main, section[id]{ scroll-margin-top:var(--header-total-h, 118px); }
  .wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
  @media(max-width:640px){ .wrap{padding:0 20px;} }

  h1,h2,h3,h4{font-family:var(--serif); font-weight:600; color:var(--umber); letter-spacing:-0.01em;}
  .eyebrow{
    font-family:var(--mono); font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase;
    color:var(--rust-deep); display:inline-flex; align-items:center; gap:10px; margin-bottom:14px;
  }
  .eyebrow::before{content:""; width:22px; height:1px; background:var(--rust-deep);}
  .lede{font-size:1.08rem; color:var(--umber-soft); max-width:620px;}
  .btn{
    display:inline-flex; align-items:center; gap:10px; font-family:var(--sans); font-weight:600;
    font-size:0.95rem; padding:14px 26px; border-radius:100px; border:1.5px solid transparent;
    cursor:pointer; transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
  }
  .btn-primary{ background:var(--rust); color:var(--white); box-shadow:0 14px 30px -14px rgba(166,86,52,0.65);}
  .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 18px 36px -14px rgba(166,86,52,0.75); }
  .btn-ghost{ border-color:var(--umber); color:var(--umber); }
  .btn-ghost:hover{ background:var(--umber); color:var(--white); transform:translateY(-2px); }
  .btn-outline-light{ border-color:rgba(255,253,249,0.55); color:var(--white); }
  .btn-outline-light:hover{ background:var(--white); color:var(--umber); }
  .btn-sm{ padding:8px 16px; font-size:0.8rem; }
  :focus-visible{ outline:2.5px solid var(--rust); outline-offset:3px; }
  
  

	/* Diese Klasse weist das Bild überall zu */
	.image-target {
	  background-image: var(--mein-base64-bild);
	  background-size: contain;
	  background-repeat: no-repeat;
	  display: inline-block; /* Wichtig, falls es leere <div> oder <span> sind */
	  width: 100px;  /* Gewünschte Breite anpassen */
	  height: 100px; /* Gewünschte Höhe anpassen */
	}

	/* Für echte <img>-Elemente: src wird per JS aus TK_ATTACHED_IMAGE gesetzt,
	   diese Klasse liefert nur ein sinnvolles Default-Sizing bis dahin. */
	.image-target-img {
	  display:inline-block;
	  width: 100px;
	  height: 100px;
	  object-fit: contain;
	}

 

  /* ---------- NAV ---------- */
  header.site{
    position:sticky; top:var(--topbar-h, 0px); left:0; right:0; z-index:500;
    background:rgba(251,246,237,0.86); backdrop-filter:blur(10px);
    border-bottom:1px solid transparent; transition:border-color .3s ease, background .3s ease;
  }
  header.site.scrolled{ border-bottom-color:var(--line); background:rgba(251,246,237,0.96); }
  .nav{ display:flex; align-items:center; justify-content:space-between; padding-top:14px; padding-bottom:14px; }
  .brand{ display:flex; align-items:center; gap:12px; }
  .brand img{ width:42px; height:42px; border-radius:50%; }
  .brand-name{ font-family:var(--serif); font-weight:700; font-size:1.12rem; line-height:1.1; }
  .brand-name span{ display:block; font-family:var(--mono); font-size:0.82rem; letter-spacing:0.06em; color:var(--umber-soft); text-transform:uppercase; margin-top:3px; font-weight:600;}
  nav.links{ display:flex; gap:30px; align-items:center; }
  nav.links a{ font-size:0.92rem; font-weight:500; color:var(--umber-soft); position:relative; padding:4px 0; }
  nav.links a::after{ content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0; background:var(--rust); transition:width .25s ease; }
  nav.links a:hover::after{ width:100%; }
  .nav-cta{ display:flex; align-items:center; gap:18px; }
  .burger{ display:none; width:26px; height:20px; position:relative; cursor:pointer; background:none; border:none; }
  .burger span{ position:absolute; left:0; right:0; height:2px; background:var(--umber); border-radius:2px; transition:.3s; }
  .burger span:nth-child(1){top:0;} .burger span:nth-child(2){top:9px;} .burger span:nth-child(3){top:18px;}
  .burger.open span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
  .burger.open span:nth-child(2){ opacity:0; }
  .burger.open span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }

  @media(max-width:900px){
    nav.links{
      position:fixed; top:var(--header-total-h, 118px); left:0; right:0; bottom:0;
      background:var(--cream); flex-direction:column; overflow-y:auto; -webkit-overflow-scrolling:touch;
      justify-content:flex-start; padding:36px 30px; gap:26px; transform:translateX(100%);
      transition:transform .35s ease; font-size:1.1rem; z-index:5;
    }
    nav.links.open{ transform:translateX(0); }
    .nav-cta .btn-ghost{ padding:9px 16px; font-size:0.85rem; }
    .burger{ display:block; }
    /* backdrop-filter erzeugt einen eigenen "containing block" fuer
       position:fixed-Kindelemente (u.a. Safari/Chrome/Android-WebView).
       Dadurch wuerde sich nav.links (position:fixed) nicht mehr am
       Viewport, sondern an der kleinen Header-Box ausrichten - mit der
       Folge, dass das per translateX(100%) eigentlich unsichtbar
       geklappte Menue (z. B. "Ueber uns") an einer falschen Stelle
       mitten auf der Seite auftaucht, obwohl es geschlossen ist.
       Daher backdrop-filter auf Mobil generell deaktivieren, nicht nur
       waehrend .nav-open, damit nav.links IMMER korrekt am echten
       Viewport ausgerichtet ist (offen wie geschlossen). */
    header.site{
      backdrop-filter:none;
      -webkit-backdrop-filter:none;
    }
  }
  /* Beim geoeffneten mobilen Menue muss der gesamte Header (inkl. Overlay-Nav)
     ueber der Barrierefreiheit-Toolbar und dem Cookie-Banner liegen, damit
     das Menue nicht verdeckt oder ueberlagert wird. */
  header.site.nav-open{
    z-index:970;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  @media(max-width:900px){ body.nav-open{ overflow:hidden; } }

  /* ---------- HERO ---------- */
  .hero{
    padding:88px 0 110px; position:relative; overflow:hidden;
    background:
      radial-gradient(circle at 85% 12%, var(--tan-tint) 0%, transparent 45%),
      radial-gradient(circle at 8% 85%, var(--tan-tint) 0%, transparent 40%),
      var(--cream);
  }
  .hero-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:60px; align-items:center; }
  @media(max-width:960px){ .hero-grid{ grid-template-columns:1fr; } }
  .hero h1{ font-family:'Big Shoulders Display', var(--sans); font-weight:700; text-transform:uppercase; letter-spacing:0.01em; font-size:clamp(2.5rem, 5.4vw, 4.2rem); line-height:1.05; margin:0 0 22px; }
  .hero h1 em{ font-style:normal; color:var(--rust); font-weight:800; }
  .hero-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-top:34px; }
  .hero-stats{ display:flex; gap:32px; margin-top:52px; flex-wrap:nowrap; }
  .hero-stats .stat b{ display:block; font-family:var(--serif); font-size:1.7rem; color:var(--umber); white-space:nowrap; }
  .hero-stats .stat span{ font-family:var(--mono); font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--umber-soft); white-space:nowrap; }
  @media(max-width:640px){
    .hero-stats{ gap:16px; }
    .hero-stats .stat b{ font-size:1.25rem; }
    .hero-stats .stat span{ font-size:0.58rem; }
  }

  /* compass / route visual */
  .compass-stage{ position:relative; width:100%; aspect-ratio:1/1; max-width:480px; margin:0 auto; }
  .compass-ring{ position:absolute; inset:0; border-radius:50%; border:1.5px dashed var(--tan-deep); opacity:0.55; animation:spin 90s linear infinite; }
  .compass-ring.r2{ inset:34px; border-style:solid; border-width:1px; opacity:0.35; animation-duration:70s; animation-direction:reverse; }
  @keyframes spin{ to{ transform:rotate(360deg); } }
  .compass-dir{ position:absolute; font-family:var(--mono); font-size:0.95rem; letter-spacing:0.1em; color:var(--umber-soft); font-weight:700; }
  .compass-dir.n{ top:-6px; left:50%; transform:translateX(-50%); }
  .compass-dir.s{ bottom:-6px; left:50%; transform:translateX(-50%); }
  .compass-dir.o{ right:-14px; top:50%; transform:translateY(-50%); }
  .compass-dir.w{ left:-16px; top:50%; transform:translateY(-50%); }
  .compass-core{
    position:absolute; inset:64px; border-radius:50%; background:var(--white);
    box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center; overflow:hidden;
  }
  .compass-core img{ width:78%; }
  .route-path{ position:absolute; inset:0; }
  .route-line{ fill:none; stroke:var(--rust); stroke-width:2; stroke-dasharray:6 7; stroke-linecap:round; animation:dash 3.2s linear infinite; }
  @keyframes dash{ to{ stroke-dashoffset:-52; } }
  .route-dot{ animation:travel 6s ease-in-out infinite; }
  @keyframes travel{
    0%{ offset-distance:0%; opacity:0; }
    8%{ opacity:1; }
    92%{ opacity:1; }
    100%{ offset-distance:100%; opacity:0; }
  }
  .route-label{ position:absolute; font-family:var(--mono); font-size:0.82rem; letter-spacing:0.06em; background:var(--white); border:1px solid var(--line); border-radius:100px; padding:5px 12px; box-shadow:0 8px 18px -12px rgba(61,47,34,0.4); white-space:nowrap; }
  .route-label.ro{ left:2%; bottom:14%; }
  .route-label.de{ right:0%; top:10%; }
  @media(prefers-reduced-motion: reduce){
    .compass-ring, .route-line, .route-dot{ animation:none !important; }
  }

  /* Kompass auf Mobilgeraeten verkleinern, damit er inkl. der ueber den
     Rand hinausragenden Himmelsrichtungen (N/S/O/W) und Routen-Labels
     vollstaendig innerhalb des sichtbaren Bereichs bleibt. */
  @media(max-width:900px){
    .compass-stage{ max-width:320px; }
  }
  @media(max-width:640px){
    .compass-stage{ max-width:250px; margin-top:8px; }
    .compass-core{ inset:44px; }
    .compass-dir{ font-size:0.8rem; }
    .compass-dir.o{ right:-10px; }
    .compass-dir.w{ left:-12px; }
    .route-label{ font-size:0.72rem; padding:4px 9px; }
  }
  @media (max-width: 768px) {
  /* Ersetzen Sie den Selektor mit der Klasse Ihres Prozess/Karten-Containers */
  .process-container, 
  .cards-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
  }

  .card, 
  .process-step {
    width: 100% !important;
    max-width: 100% !important;
  }
}
  
  
  @media(max-width:380px){
    .compass-stage{ max-width:210px; }
    .compass-core{ inset:40px; }
    .route-label{ font-size:0.62rem; padding:3px 7px; }
    .route-label.ro{ left:0; bottom:6%; }
    .route-label.de{ right:-2%; top:6%; }
  }

  /* ---------- SECTION HEADERS ---------- */
  .section-head{ max-width:640px; margin-bottom:56px; }
  .section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
  .section-pad{ padding:110px 0; }
  @media(max-width:640px){ .section-pad{ padding:78px 0; } }
  .band-dark{ background:linear-gradient(165deg,#52402E 0%,#3D2F22 100%); color:var(--cream); }
  .band-dark h2{ color:var(--white); }
  .band-dark .lede{ color:rgba(251,246,237,0.82); }
  .band-tint{ background:var(--cream-2); }

  /* ---------- ABOUT ---------- */
  .about-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:70px; align-items:center; }
  @media(max-width:900px){ .about-grid{ grid-template-columns:1fr; gap:40px; } }
  .about-figure{ position:relative; border-radius:var(--radius); overflow:hidden; background:var(--umber); aspect-ratio:4/5; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow); }
  .about-figure svg{ width:60%; }

  /* ============================================================
     HUNDE-GALERIE / BILDERMOSAIK — geretteter Hunde
     Hier je Hund das Foto als Base64-Data-URI eintragen
     (Format: url('data:image/jpeg;base64,....') ).
     Bis zu 9 Fotos (--dog-1 bis --dog-9). Nicht benötigte
     Plätze können auf dem Platzhalter-Wert bleiben.
     ============================================================ */
  :root{
    --dog-1: url('assets/dog-1.png');
    --dog-2: url('assets/dog-2.jpg');
    --dog-3: url('assets/dog-3.jpg');
    --dog-4: url('assets/dog-4.jpg');
    --dog-5: url('assets/dog-5.jpg');
    --dog-6: url('assets/dog-6.jpg');
    --dog-7: url('assets/dog-7.jpg');
    --dog-8: var(--dog-9);
    --dog-9: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMjAwIj4KPHJlY3Qgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIGZpbGw9IiNFRkUzQ0UiLz4KPGcgZmlsbD0iI0JDOUU3OCIgb3BhY2l0eT0iMC41NSI+CjxjaXJjbGUgY3g9Ijc4IiBjeT0iNzgiIHI9IjExIi8+CjxjaXJjbGUgY3g9IjEwMCIgY3k9IjY2IiByPSIxMSIvPgo8Y2lyY2xlIGN4PSIxMjIiIGN5PSI3OCIgcj0iMTEiLz4KPGVsbGlwc2UgY3g9IjEwMCIgY3k9IjExMiIgcng9IjIyIiByeT0iMTgiLz4KPC9nPgo8L3N2Zz4=');
  }
  .dog-mosaic{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    grid-template-rows:repeat(3, 1fr);
    gap:8px;
    aspect-ratio:4/5;
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow:var(--shadow);
    background:var(--umber);
  }
  .dog-mosaic .dog-cell{
    background-size:cover;
    background-position:center;
    background-color:var(--tan-tint);
    transition:transform .5s ease, filter .5s ease;
  }
  .dog-mosaic .dog-cell:hover{ transform:scale(1.04); filter:brightness(1.05); }
  .dog-mosaic .dog-cell:nth-child(1){ grid-column:1 / 3; grid-row:1 / 3; background-image:var(--dog-1); }
  .dog-mosaic .dog-cell:nth-child(2){ grid-column:3 / 4; grid-row:1 / 2; background-image:var(--dog-2); }
  .dog-mosaic .dog-cell:nth-child(3){ grid-column:4 / 5; grid-row:1 / 2; background-image:var(--dog-3); }
  .dog-mosaic .dog-cell:nth-child(4){ grid-column:3 / 4; grid-row:2 / 3; background-image:var(--dog-4); }
  .dog-mosaic .dog-cell:nth-child(5){ grid-column:4 / 5; grid-row:2 / 3; background-image:var(--dog-5); }
  .dog-mosaic .dog-cell:nth-child(6){ grid-column:1 / 2; grid-row:3 / 4; background-image:var(--dog-6); }
  .dog-mosaic .dog-cell:nth-child(7){ grid-column:2 / 3; grid-row:3 / 4; background-image:var(--dog-7); }
  .dog-mosaic .dog-cell:nth-child(8){ grid-column:3 / 4; grid-row:3 / 4; background-image:var(--dog-8); }
  .dog-mosaic .dog-cell:nth-child(9){ grid-column:4 / 5; grid-row:3 / 4; background-image:var(--dog-9); }
  @media(max-width:640px){ .dog-mosaic{ aspect-ratio:1/1; gap:5px; } }
  .about-copy p{ color:var(--umber-soft); margin-bottom:16px; }
  .pillars{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:30px; }
  .pillar{ padding:20px; border:1px solid var(--line); border-radius:16px; background:var(--white); }
  .pillar b{ display:block; font-family:var(--serif); font-size:1.05rem; margin-bottom:4px; }
  .pillar span{ font-size:0.88rem; color:var(--umber-soft); }

  /* ---------- ROUTE / VERMITTLUNG ---------- */
  .route-flow{ display:flex; align-items:stretch; gap:0; margin-top:20px; flex-wrap:wrap; }
  .route-node{
    flex:1 1 200px; background:rgba(255,253,249,0.09); border:1px solid rgba(255,253,249,0.24); border-radius:18px;
    padding:28px 24px; position:relative; backdrop-filter:blur(2px);
    box-shadow:0 16px 34px -22px rgba(0,0,0,0.55);
  }
  .route-node + .route-node{ margin-left:0; }
  .route-connector{ display:flex; align-items:center; justify-content:center; flex:0 0 60px; color:var(--tan-tint); font-family:var(--mono); font-size:1.2rem; }
  @media(max-width:1000px){ .route-connector{ transform:rotate(90deg); flex-basis:40px; } }
  .route-icon{
    width:52px; height:52px; border-radius:50%; margin-bottom:18px;
    display:flex; align-items:center; justify-content:center;
    background:rgba(255,253,249,0.14); border:1px solid rgba(255,253,249,0.3);
    color:var(--tan-tint);
  }
  .route-icon svg{ width:26px; height:26px; }
  .route-node .tag{ font-family:var(--mono); font-size:0.72rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--tan-tint); }
  .route-node h4{ color:var(--white); margin:10px 0 10px; font-size:clamp(1.25rem,1.9vw,1.5rem); font-weight:700; letter-spacing:-0.01em; }
  .route-node p{ color:rgba(251,246,237,0.8); font-size:0.95rem; }

  /* ---------- ABLAUF ---------- */
  .steps{ counter-reset:step; margin-top:10px; }
  .step{ display:grid; grid-template-columns:90px 1fr; gap:26px; padding:32px 0; border-top:1px solid var(--line); }
  .step:last-child{ border-bottom:1px solid var(--line); }
  .step-num{ font-family:var(--serif); font-size:2.3rem; color:var(--tan-deep); font-weight:300; }
  .step h3{ font-size:1.25rem; margin-bottom:8px; }
  .step p{ color:var(--umber-soft); max-width:560px; }
  .step-media{ font-family:var(--mono); font-size:0.72rem; color:var(--rust-deep); margin-top:10px; display:inline-block; }

  /* ---------- RESOURCES ---------- */
  .res-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:24px; margin-top:8px; }
  @media(max-width:900px){ .res-grid{ grid-template-columns:1fr; } }
  .res-card{
    background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:30px;
    display:flex; flex-direction:column; gap:14px; transition:transform .25s ease, box-shadow .25s ease;
  }
  .res-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
  .res-icon{ width:46px; height:46px; border-radius:12px; background:var(--tan-tint); display:flex; align-items:center; justify-content:center; color:var(--rust-deep); }
  .res-card h3{ font-size:1.08rem; }
  .res-card p{ color:var(--umber-soft); font-size:0.92rem; flex:1; }
  .res-link{ font-family:var(--mono); font-size:0.75rem; letter-spacing:0.04em; color:var(--rust); display:inline-flex; align-items:center; gap:8px; }
  .res-link svg{ transition:transform .2s ease; }
  .res-card:hover .res-link svg{ transform:translate(3px,-3px); }

  /* ---------- CONTACT ---------- */
  .contact-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:60px; }
  @media(max-width:900px){ .contact-grid{ grid-template-columns:1fr; gap:36px; } }
  .contact-info .item{ display:flex; gap:14px; align-items:flex-start; margin-bottom:22px; }
  .contact-info .item svg{ flex:0 0 auto; margin-top:3px; color:var(--rust-deep); }
  .contact-info .item b{ display:block; font-family:var(--serif); font-size:1.02rem; }
  .contact-info .item span, .contact-info .item a{ color:var(--umber-soft); font-size:0.94rem; }
  form.contact-form{ display:grid; gap:16px; }
  .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  @media(max-width:560px){ .form-row{ grid-template-columns:1fr; } }
  .field label{ display:block; font-size:0.82rem; font-weight:600; margin-bottom:6px; color:var(--umber-soft); }
  .field input, .field textarea, .field select{
    width:100%; padding:13px 15px; border:1.5px solid var(--line); border-radius:12px; font-family:var(--sans);
    font-size:16px; background:var(--white); color:var(--umber); transition:border-color .2s ease;
  }
  .field input:focus, .field textarea:focus, .field select:focus{ border-color:var(--rust); }
  .field.hp{ position:absolute; left:-9999px; }
  .consent{ display:flex; gap:10px; align-items:flex-start; font-size:0.85rem; color:var(--umber-soft); }
  .consent a{ color:var(--rust-deep); text-decoration:underline; }
  .form-note{ font-size:0.8rem; color:var(--umber-soft); }

  /* ---------- FOOTER ---------- */
  footer.site{ background:var(--umber); color:rgba(251,246,237,0.82); padding:70px 0 26px; }
  .footer-grid{ display:grid; grid-template-columns:1.3fr 0.85fr 0.85fr 1.1fr; gap:40px; margin-bottom:50px; }
  @media(max-width:1080px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:34px 40px; } }
  @media(max-width:560px){ .footer-grid{ grid-template-columns:1fr; gap:34px; } }
  .footer-brand{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
  .footer-brand img{ width:38px; height:38px; border-radius:50%; }
  .footer-brand b{ font-family:var(--serif); color:var(--white); font-size:1.1rem; }
  .footer-legal{ font-family:var(--mono); font-size:0.72rem; letter-spacing:0.04em; color:var(--tan); margin:0 0 12px; max-width:320px; }
  footer.site p{ font-size:0.9rem; max-width:320px; color:rgba(251,246,237,0.65); }
  footer.site h5{ font-family:var(--mono); font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--tan); margin-bottom:16px; }
  footer.site ul li{ margin-bottom:10px; }
  footer.site ul a{ font-size:0.92rem; color:rgba(251,246,237,0.8); }
  footer.site ul a:hover{ color:var(--white); }
  .footer-bottom{ border-top:1px solid rgba(251,246,237,0.14); padding-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:0.82rem; color:rgba(251,246,237,0.55); }
  .footer-bottom a{ color:rgba(251,246,237,0.7); }

  /* Footer social icons */
  .footer-social{ display:flex; gap:10px; margin-top:20px; flex-wrap:wrap; }
  .footer-social a{
    width:38px; height:38px; display:flex; align-items:center; justify-content:center;
    border:1px solid rgba(251,246,237,0.25); border-radius:50%; color:rgba(251,246,237,0.85);
    transition:background .2s ease, border-color .2s ease, color .2s ease;
  }
  .footer-social a:hover{ background:var(--rust-deep); border-color:var(--rust-deep); color:var(--white); }
  .footer-social svg{ width:17px; height:17px; }

  /* Footer Spendenkonto */
  .footer-donate{ font-size:0.88rem; }
  .footer-donate li{ margin-bottom:9px; line-height:1.3; }
  .footer-donate li span{ display:block; font-family:var(--mono); font-size:0.66rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--tan); margin-bottom:2px; }
  .footer-donate-note{ font-size:0.78rem; line-height:1.5; color:rgba(251,246,237,0.6); margin-top:10px; max-width:280px; }

  /* ---------- MODALS ---------- */
  .modal-overlay{ position:fixed; inset:0; background:rgba(30,22,15,0.55); backdrop-filter:blur(3px); z-index:1000; display:none; align-items:flex-start; justify-content:center; padding:60px 20px; overflow-y:auto; }
  .modal-overlay.open{ display:flex; }
  .modal{ background:var(--white); border-radius:20px; max-width:680px; width:100%; padding:40px; position:relative; box-shadow:0 30px 70px -20px rgba(0,0,0,0.4); }
  .modal h2{ font-size:1.5rem; margin-bottom:18px; }
  .modal h3{ font-size:1.05rem; margin:22px 0 8px; }
  .modal p, .modal li{ font-size:0.93rem; color:var(--umber-soft); margin-bottom:10px; }
  .modal ul{ padding-left:18px; list-style:disc; }
  .modal-close{ position:absolute; top:22px; right:22px; width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:var(--white); cursor:pointer; font-size:1.1rem; line-height:1; color:var(--umber); }
  .modal-close:hover{ background:var(--cream-2); }
  .modal strong{ color:var(--umber); }
  .cookie-toggle{ display:flex; justify-content:space-between; align-items:center; padding:14px 0; border-top:1px solid var(--line); }
  .cookie-toggle:last-of-type{ border-bottom:1px solid var(--line); margin-bottom:20px; }
  .switch{ position:relative; width:44px; height:24px; }
  .switch input{ opacity:0; width:0; height:0; }
  .slider{ position:absolute; inset:0; background:var(--line); border-radius:100px; cursor:pointer; transition:.2s; }
  .slider::before{ content:""; position:absolute; width:18px; height:18px; left:3px; top:3px; background:var(--white); border-radius:50%; transition:.2s; }
  input:checked + .slider{ background:var(--rust); }
  input:checked + .slider::before{ transform:translateX(20px); }
  input:disabled + .slider{ opacity:0.5; cursor:not-allowed; }
  .modal-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:8px; }

  /* ---------- BACK TO TOP ---------- */
  .back-to-top{
    position:fixed; right:20px; bottom:24px; z-index:800;
    width:48px; height:48px; border-radius:50%; border:none; cursor:pointer;
    background:var(--umber); color:var(--white); display:flex; align-items:center; justify-content:center;
    box-shadow:0 14px 30px -12px rgba(61,47,34,0.5);
    opacity:0; pointer-events:none; transform:translateY(14px);
    transition:opacity .25s ease, transform .25s ease, background .2s ease, bottom .25s ease;
  }
  .back-to-top.show{ opacity:1; pointer-events:auto; transform:translateY(0); }
  .back-to-top:hover{ background:var(--rust); }
  .back-to-top svg{ width:20px; height:20px; }
  body.cookie-visible .back-to-top{ bottom:160px; }
  @media(max-width:640px){
    .back-to-top{ width:44px; height:44px; right:14px; bottom:18px; }
    body.cookie-visible .back-to-top{ bottom:220px; }
  }

  /* ---------- COOKIE BANNER ---------- */
  .cookie-banner{
    position:fixed; left:20px; right:20px; bottom:20px; max-width:560px; margin:0 auto; z-index:900;
    background:var(--white); border:1px solid var(--line); border-radius:18px; padding:24px 26px;
    box-shadow:0 25px 60px -20px rgba(61,47,34,0.45); transform:translateY(140%); transition:transform .5s ease;
  }
  .cookie-banner.show{ transform:translateY(0); }
  .cookie-banner p{ font-size:0.87rem; color:var(--umber-soft); margin-bottom:16px; }
  .cookie-banner .btns{ display:flex; gap:10px; flex-wrap:wrap; }
  .cookie-banner .btn{ padding:11px 18px; font-size:0.85rem; }

  /* reveal on scroll */
  .reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
  .reveal.in{ opacity:1; transform:translateY(0); }

  .sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }

  /* ---------- TOPBAR (social + phone) ---------- */
  .topbar{
    background:var(--umber); color:var(--tan-tint);
    font-family:var(--sans); font-size:0.82rem;
    position:sticky; top:0; left:0; right:0; z-index:600;
  }
  .topbar .wrap{
    display:flex; align-items:center; justify-content:space-between;
    padding:8px 32px; gap:16px; flex-wrap:wrap;
  }
  @media(max-width:640px){ .topbar .wrap{ padding:8px 20px; justify-content:center; } }
  .topbar-links{ display:flex; align-items:center; gap:16px; }
  .topbar-links a{
    display:inline-flex; align-items:center; justify-content:center;
    width:38px; height:38px; border-radius:50%;
    color:var(--tan-tint); opacity:0.92; transition:opacity .2s ease, background .2s ease, transform .2s ease;
  }
  .topbar-links a:hover{ opacity:1; background:rgba(255,255,255,0.14); transform:translateY(-1px); }
  .topbar-links a svg{ width:21px; height:21px; }
  .topbar-phone{ display:inline-flex; align-items:center; gap:8px; color:var(--tan-tint); font-weight:500; }
  .topbar-phone svg{ width:15px; height:15px; flex-shrink:0; }
  .topbar-phone a{ color:inherit; letter-spacing:0.02em; }
  .topbar-phone a:hover{ text-decoration:underline; }

  /* ---------- SELBSTAUSKUNFT FORM PAGE ---------- */
  .sa-hero{ padding:56px 0 8px; }
  .sa-form-wrap{ max-width:900px; margin:0 auto; }
  .sa-notice{
    background:var(--tan-tint); border:1px solid var(--tan-deep); border-left:5px solid var(--rust);
    border-radius:var(--radius);
    padding:20px 24px; margin-bottom:30px; font-size:1rem; font-weight:600; line-height:1.55;
    color:var(--umber); display:flex; flex-direction:column; gap:8px; align-items:stretch;
  }
  .sa-notice svg{ flex:0 0 auto; width:24px; height:24px; color:var(--rust-deep); }
  .sa-notice strong{ color:var(--rust-deep); display:block; }
  .sa-notice, .sa-notice p{ min-width:0; overflow-wrap:break-word; word-break:break-word; }
  .sa-notice p{ margin:0; font-weight:400; }
  @media(max-width:640px){
    .sa-notice{ padding:16px 18px; }
  }
  .sa-section{
    background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
    padding:28px clamp(18px,4vw,34px); margin-bottom:24px; box-shadow:var(--shadow);
  }
  .sa-section h3{ font-size:1.15rem; margin-bottom:6px; }
  .sa-section .sa-section-desc{ color:var(--umber-soft); font-size:0.88rem; margin-bottom:18px; }
  .sa-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px 20px; }
  @media(max-width:640px){ .sa-grid{ grid-template-columns:1fr; } }
  .sa-grid.cols-3{ grid-template-columns:1fr 1fr 1fr; }
  @media(max-width:760px){ .sa-grid.cols-3{ grid-template-columns:1fr; } }
  .sa-field{ display:flex; flex-direction:column; gap:6px; }
  .sa-field.full{ grid-column:1 / -1; }
  .sa-field label{ font-size:0.85rem; font-weight:600; color:var(--umber); }
  .sa-field .sa-hint{ font-size:0.78rem; color:var(--umber-soft); font-weight:400; }
  .sa-field input[type=text], .sa-field input[type=email], .sa-field input[type=tel],
  .sa-field input[type=date], .sa-field input[type=number], .sa-field select, .sa-field textarea{
    font-family:var(--sans); font-size:16px; padding:11px 14px; border-radius:12px;
    border:1.5px solid var(--line); background:var(--cream); color:var(--umber);
    transition:border-color .2s ease;
  }
  .sa-field input:focus, .sa-field select:focus, .sa-field textarea:focus{
    outline:none; border-color:var(--tan-deep);
  }
  .sa-radio-row, .sa-check-row{ display:flex; flex-wrap:wrap; gap:8px 22px; align-items:center; }
  .sa-radio-row label, .sa-check-row label{
    display:inline-flex; align-items:center; gap:7px; font-size:0.92rem; font-weight:500; color:var(--umber-soft);
    cursor:pointer;
  }
  .sa-radio-row input, .sa-check-row input{ accent-color:var(--rust-deep); width:16px; height:16px; }
  .sa-inline-extra{ display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; align-items:center; }
  .sa-inline-extra .sa-field{ min-width:160px; flex:1; }
  .sa-field-invalid{ outline:2px solid #c0392b; outline-offset:6px; border-radius:14px; }
  .sa-field-invalid > label:first-of-type::after{ content:" — bitte ausfüllen"; color:#c0392b; font-weight:600; }
  .sa-validation-summary{
    display:none; background:#fdecea; border:1.5px solid #c0392b; color:#8b2c1f; border-radius:var(--radius);
    padding:16px 20px; margin-bottom:22px; font-size:0.9rem; font-weight:600;
  }
  .sa-validation-summary.show{ display:block; }
  .sa-actions{
    display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between;
    background:var(--tan-tint); border-radius:var(--radius); padding:22px 26px; margin-top:8px;
  }
  .sa-status{ font-family:var(--mono); font-size:0.76rem; color:var(--umber-soft); }
  .sa-consent{ display:flex; align-items:flex-start; gap:10px; font-size:0.88rem; color:var(--umber-soft); margin-bottom:18px; }
  .sa-consent input{ margin-top:3px; accent-color:var(--rust-deep); }
  .sa-btn-row{ display:flex; flex-wrap:wrap; gap:12px; }
  .sa-toast{
    position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
    background:var(--umber); color:var(--white); padding:12px 22px; border-radius:100px;
    font-size:0.85rem; opacity:0; pointer-events:none; transition:opacity .3s ease, transform .3s ease;
    z-index:500;
  }
  .sa-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

  /* ================= BARRIEREFREIHEIT ================= */

  /* Skip-Link */
  .skip-link{
    position:absolute; left:-9999px; top:0; z-index:2000;
    background:var(--umber); color:var(--white); padding:12px 22px;
    border-radius:0 0 12px 0; font-weight:600; font-size:0.92rem;
  }
  .skip-link:focus{ left:0; }

  /* Bedienfeld: Umschalt-Button */
  .a11y-toggle{
    position:fixed; top:50%; right:18px; transform:translateY(-50%); z-index:950;
    width:52px; height:52px; border-radius:50%; background:var(--umber); color:var(--white);
    border:2px solid var(--white); box-shadow:0 12px 30px -10px rgba(61,47,34,0.55);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    transition:transform .2s ease, background .2s ease;
  }
  .a11y-toggle:hover{ background:var(--rust); transform:translateY(-50%) scale(1.06); }
  .a11y-toggle svg{ width:26px; height:26px; }
  @media(max-width:640px){
    .a11y-toggle{
      width:46px; height:46px; right:14px; left:auto;
      top:auto; bottom:72px; transform:none;
    }
    .a11y-toggle:hover{ transform:scale(1.06); }
    .a11y-toggle svg{ width:22px; height:22px; }
    body.cookie-visible .a11y-toggle{ bottom:212px; }
  }

  /* Bedienfeld: Panel */
  .a11y-panel{
    position:fixed; top:50%; right:82px; transform:translateY(-50%) translateX(12px); z-index:950;
    width:300px; max-width:calc(100vw - 100px); max-height:82vh; overflow-y:auto;
    background:var(--white); border:1px solid var(--line); border-radius:18px;
    box-shadow:0 30px 70px -20px rgba(0,0,0,0.4); padding:24px;
    opacity:0; pointer-events:none; transition:opacity .22s ease, transform .22s ease;
  }
  .a11y-panel.open{ opacity:1; pointer-events:auto; transform:translateY(-50%) translateX(0); }
  @media(max-width:640px){
    .a11y-panel{
      right:8px; width:calc(100vw - 16px); max-width:340px;
      top:auto; bottom:126px; transform:translateY(12px);
    }
    .a11y-panel.open{ transform:translateY(0); }
    body.cookie-visible .a11y-panel{ bottom:266px; }
  }
  .a11y-panel h2{ font-size:1.05rem; margin-bottom:4px; padding-right:26px; }
  .a11y-panel .a11y-sub{ font-size:0.8rem; color:var(--umber-soft); margin-bottom:18px; }
  .a11y-group{ margin-bottom:18px; }
  .a11y-group:last-of-type{ margin-bottom:0; }
  .a11y-group h3{
    font-family:var(--mono); font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase;
    color:var(--tan-deep); margin-bottom:10px; font-weight:700;
  }
  .a11y-row{ display:flex; gap:8px; flex-wrap:wrap; }
  .a11y-btn{
    flex:1; min-width:64px; display:flex; align-items:center; justify-content:center; gap:6px;
    font-family:var(--sans); font-size:0.82rem; font-weight:600; padding:9px 8px;
    border-radius:10px; border:1.5px solid var(--line); background:var(--cream); color:var(--umber);
    cursor:pointer; transition:.2s ease;
  }
  .a11y-btn:hover{ border-color:var(--tan-deep); }
  .a11y-btn.active{ background:var(--umber); color:var(--white); border-color:var(--umber); }
  .a11y-btn-wide{ flex-basis:100%; }
  .a11y-reset{
    margin-top:16px; width:100%; padding:10px; border-radius:10px; border:1.5px solid var(--line);
    background:transparent; color:var(--umber-soft); font-size:0.82rem; cursor:pointer;
  }
  .a11y-reset:hover{ border-color:var(--umber); color:var(--umber); }
  .a11y-close{
    position:absolute; top:16px; right:16px; width:30px; height:30px; border-radius:50%;
    border:1px solid var(--line); background:var(--white); cursor:pointer; font-size:1rem; color:var(--umber);
    line-height:1;
  }
  .a11y-close:hover{ background:var(--cream-2); }

  /* Farbmodi */
  body.a11y-dark{ background:#161311; color:#EFE3CE; }
  body.a11y-dark section, body.a11y-dark header.site, body.a11y-dark .modal,
  body.a11y-dark .sa-section, body.a11y-dark .pillar, body.a11y-dark .a11y-panel{ background:#1F1B17; }
  body.a11y-dark header.site{ background:rgba(22,19,17,0.92); }
  body.a11y-dark .topbar{ background:#0F0D0B; }
  body.a11y-dark h1, body.a11y-dark h2, body.a11y-dark h3, body.a11y-dark h4{ color:#F5EEDF; }
  body.a11y-dark .lede, body.a11y-dark p, body.a11y-dark li{ color:#D8C9AE; }
  body.a11y-dark .band-tint{ background:#221D18; }
  body.a11y-dark .btn-ghost{ border-color:#EFE3CE; color:#EFE3CE; }
  body.a11y-dark .brand-name span{ color:#D8C9AE; }
  body.a11y-dark .a11y-panel{ border-color:#3D2F22; }
  body.a11y-dark .a11y-btn{ background:#2A231D; color:#EFE3CE; border-color:#3D2F22; }
  body.a11y-dark .a11y-btn.active{ background:#EFE3CE; color:#1F1B17; }
  body.a11y-dark .sa-field input, body.a11y-dark .sa-field select, body.a11y-dark .sa-field textarea{
    background:#2A231D; color:#EFE3CE; border-color:#3D2F22;
  }
  body.a11y-dark .res-card {
  background: #1F1B17;
  border-color: #3D2F22;
 }

  body.a11y-dark .field input,
  body.a11y-dark .field select,
  body.a11y-dark .field textarea {
  background: #2A231D;
  color: #EFE3CE;
  border-color: #3D2F22;
 }
  
  

  body.a11y-contrast{ background:#000 !important; color:#FFEB3B !important; }
  body.a11y-contrast *{ background-color:#000 !important; color:#FFEB3B !important; border-color:#FFEB3B !important; }
  body.a11y-contrast a, body.a11y-contrast .btn{ color:#FFEB3B !important; text-decoration:underline !important; }
  body.a11y-contrast img:not(.a11y-toggle img), body.a11y-contrast svg{ filter:grayscale(1) contrast(1.5); }
  body.a11y-contrast .a11y-toggle{ outline:3px solid #FFEB3B; }

  /* Invertiert wirkt bewusst nur auf #tkPage (nicht auf body): ein CSS-filter auf
     body wuerde fuer alle position:fixed-Kindelemente (u.a. die a11y-Toolbar)
     einen neuen Containing-Block erzeugen und sie unklickbar machen. */
  #tkPage.a11y-invert{ filter:invert(1) hue-rotate(180deg); background:var(--cream); }
  #tkPage.a11y-invert img, #tkPage.a11y-invert svg, #tkPage.a11y-invert video{ filter:invert(1) hue-rotate(180deg); }

  /* Lesehilfen */
  body.a11y-underline-links a{ text-decoration:underline !important; }
  body.a11y-readable-font, body.a11y-readable-font *{
    font-family:Arial, Helvetica, sans-serif !important; letter-spacing:0.01em !important;
  }

  /* Lupe */
  .tk-loupe{
    position:fixed; width:200px; height:200px; border-radius:50%;
    border:4px solid var(--umber); box-shadow:0 0 0 3px var(--white), 0 20px 50px -15px rgba(0,0,0,0.5);
    pointer-events:none; overflow:hidden; z-index:1200; display:none; background:var(--white);
  }
  .tk-loupe.active{ display:block; }
  .tk-loupe-inner{ position:absolute; top:0; left:0; transform-origin:0 0; }
  body.tk-loupe-on{ cursor:none; }
  body.tk-loupe-on .a11y-toggle, body.tk-loupe-on .a11y-panel, body.tk-loupe-on .a11y-panel *{ cursor:auto; }
  @media(max-width:640px){ .tk-loupe{ width:150px; height:150px; } }
  @media(prefers-reduced-motion: reduce){ .a11y-toggle, .a11y-panel{ transition:none; } }

  /* ================= VERMITTLUNG: KOPFBEREICH + GALERIE ================= */
  .vermittlung-head-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; margin-bottom:56px; }
  @media(max-width:960px){ .vermittlung-head-grid{ grid-template-columns:1fr; gap:34px; } }

  .rescue-gallery{ width:100%; }
  .rg-stage{
    position:relative; width:100%; aspect-ratio:4/3; border-radius:var(--radius); overflow:hidden;
    background:rgba(255,253,249,0.06); box-shadow:var(--shadow); border:1px solid rgba(255,253,249,0.12);
  }
  .rg-track{ position:relative; width:100%; height:100%; }
  .rg-slide{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; cursor:zoom-in;
    transition:opacity .7s ease; pointer-events:none;
  }
  .rg-slide.active{ opacity:1; pointer-events:auto; }
  .rg-empty{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    color:var(--tan-tint); font-family:var(--mono); font-size:0.85rem; text-align:center; padding:20px;
  }
  .rg-empty[hidden]{ display:none; }

  .rg-arrow{
    position:absolute; top:50%; transform:translateY(-50%); z-index:3;
    width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,253,249,0.35);
    background:rgba(61,47,34,0.55); color:var(--white); display:flex; align-items:center; justify-content:center;
    cursor:pointer; backdrop-filter:blur(3px); transition:background .2s ease, transform .2s ease;
  }
  .rg-arrow:hover{ background:var(--rust); transform:translateY(-50%) scale(1.06); }
  .rg-arrow svg{ width:20px; height:20px; }
  .rg-prev{ left:12px; }
  .rg-next{ right:12px; }

  .rg-expand{
    position:absolute; top:12px; right:12px; z-index:3;
    width:38px; height:38px; border-radius:10px; border:1px solid rgba(255,253,249,0.35);
    background:rgba(61,47,34,0.55); color:var(--white); display:flex; align-items:center; justify-content:center;
    cursor:pointer; backdrop-filter:blur(3px); transition:background .2s ease;
  }
  .rg-expand:hover{ background:var(--rust); }
  .rg-expand svg{ width:18px; height:18px; }

  .rg-playpause-wrap{ position:absolute; bottom:12px; right:12px; z-index:3; }
  .rg-playpause{
    width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,253,249,0.35);
    background:rgba(61,47,34,0.55); color:var(--white); display:flex; align-items:center; justify-content:center;
    cursor:pointer; backdrop-filter:blur(3px); transition:background .2s ease;
  }
  .rg-playpause:hover{ background:var(--rust); }
  .rg-playpause svg{ width:16px; height:16px; }

  .rg-dots{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:16px; }
  .rg-dot{
    width:9px; height:9px; border-radius:50%; border:1px solid rgba(255,253,249,0.5);
    background:transparent; padding:0; cursor:pointer; transition:background .2s ease, transform .2s ease;
  }
  .rg-dot.active{ background:var(--rust); border-color:var(--rust); transform:scale(1.2); }
  .rg-dot:hover{ border-color:var(--rust); }

  /* ---------- Vollbild-Lightbox ---------- */
  .rg-lightbox{
    position:fixed; inset:0; z-index:1000; background:rgba(24,17,10,0.94);
    display:flex; align-items:center; justify-content:center; padding:24px;
  }
  .rg-lightbox[hidden]{ display:none; }
  .rg-lb-stage{ position:relative; max-width:min(1100px,92vw); max-height:86vh; display:flex; flex-direction:column; align-items:center; }
  .rg-lb-img{ max-width:100%; max-height:78vh; object-fit:contain; border-radius:14px; box-shadow:0 30px 70px -20px rgba(0,0,0,0.6); }
  .rg-lb-caption{ margin-top:14px; color:var(--tan-tint); font-family:var(--mono); font-size:0.82rem; letter-spacing:0.03em; text-align:center; }

  .rg-lb-close{
    position:absolute; top:20px; right:20px; z-index:1001;
    width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,253,249,0.35);
    background:rgba(255,253,249,0.08); color:var(--white); font-size:1.1rem; cursor:pointer;
    transition:background .2s ease;
  }
  .rg-lb-close:hover{ background:var(--rust); }

  .rg-lb-arrow{
    position:absolute; top:50%; transform:translateY(-50%); z-index:1001;
    width:52px; height:52px; border-radius:50%; border:1px solid rgba(255,253,249,0.35);
    background:rgba(255,253,249,0.08); color:var(--white); display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:background .2s ease, transform .2s ease;
  }
  .rg-lb-arrow:hover{ background:var(--rust); transform:translateY(-50%) scale(1.06); }
  .rg-lb-arrow svg{ width:24px; height:24px; }
  .rg-lb-prev{ left:6px; }
  .rg-lb-next{ right:6px; }
  @media(min-width:720px){ .rg-lb-prev{ left:20px; } .rg-lb-next{ right:20px; } }

  .rg-lb-playpause{
    position:absolute; bottom:20px; left:50%; transform:translateX(-50%); z-index:1001;
    width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,253,249,0.35);
    background:rgba(255,253,249,0.08); color:var(--white); display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:background .2s ease;
  }
  .rg-lb-playpause:hover{ background:var(--rust); }
  .rg-lb-playpause svg{ width:18px; height:18px; }

  .rg-lb-counter{
    position:absolute; top:24px; left:24px; z-index:1001; color:var(--tan-tint);
    font-family:var(--mono); font-size:0.78rem; letter-spacing:0.06em;
  }

  @media(max-width:640px){
    .rg-stage{ aspect-ratio:1/1; }
    .rg-arrow, .rg-expand, .rg-playpause{ width:36px; height:36px; }
  }

.scroll-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
}

/* ==========================================================================
   SELBSTAUSKUNFT — Schrittnavigation, Fortschritt, bedingte Felder
   ========================================================================== */

  .sa-progress-wrap{
    position:sticky; top:var(--header-total-h, 96px); z-index:30;
    background:var(--cream); border:1px solid var(--line); border-radius:18px;
    padding:16px 18px 14px; margin-bottom:26px; box-shadow:0 10px 26px -22px rgba(61,47,34,0.5);
  }
  .sa-progress-head{ display:flex; flex-wrap:wrap; gap:6px 16px; justify-content:space-between; align-items:baseline; margin-bottom:10px; }
  .sa-progress-label{ font-size:0.92rem; font-weight:700; color:var(--umber); }
  .sa-progress-pct{ font-family:var(--mono); font-size:0.72rem; letter-spacing:0.04em; color:var(--umber-soft); }
  .sa-progress-track{ height:7px; border-radius:99px; background:var(--tan-tint); overflow:hidden; }
  .sa-progress-fill{ height:100%; width:0; border-radius:99px; background:var(--rust); transition:width .35s ease; }

  .sa-steps{ display:flex; flex-wrap:wrap; gap:7px; margin-top:13px; }
  .sa-step-chip{
    display:inline-flex; align-items:center; gap:7px; cursor:pointer;
    font-family:var(--sans); font-size:0.78rem; font-weight:600; color:var(--umber-soft);
    background:var(--white); border:1px solid var(--line); border-radius:99px;
    padding:6px 12px 6px 6px; transition:border-color .2s ease, color .2s ease, background .2s ease;
  }
  .sa-step-chip:hover{ border-color:var(--tan-deep); color:var(--umber); }
  .sa-chip-num{
    width:21px; height:21px; border-radius:50%; flex:0 0 auto;
    display:inline-flex; align-items:center; justify-content:center;
    background:var(--tan-tint); color:var(--umber); font-family:var(--mono); font-size:0.66rem;
  }
  .sa-step-chip.is-done .sa-chip-num{ background:var(--sage); color:var(--white); }
  .sa-step-chip.is-current{ background:var(--rust); border-color:var(--rust); color:var(--white); }
  .sa-step-chip.is-current .sa-chip-num{ background:rgba(255,253,249,0.28); color:var(--white); }

  .sa-viewtoggle{
    margin-top:12px; background:none; border:none; cursor:pointer; padding:0;
    font-family:var(--mono); font-size:0.72rem; letter-spacing:0.03em;
    color:var(--rust-deep); text-decoration:underline; text-underline-offset:3px;
  }

  .sa-section{ display:none; }
  .sa-section.is-active{ display:block; }
  .sa-section h3{ display:flex; align-items:center; gap:12px; }
  .sa-step-badge{
    width:30px; height:30px; flex:0 0 auto; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    background:var(--tan-tint); color:var(--rust-deep);
    font-family:var(--mono); font-size:0.8rem; font-weight:700;
  }

  .sa-cond{ display:none; }
  .sa-cond.is-visible{ display:block; }
  .sa-field.sa-cond.is-visible{ display:flex; }

  .sa-stepnav{
    display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
    margin-top:22px; padding-top:20px; border-top:1px solid var(--line);
  }
  .sa-stepnav-info{ font-size:0.82rem; color:var(--umber-soft); }
  .sa-stepnav .btn:disabled{ opacity:0.4; cursor:not-allowed; }

  .sa-consent.sa-field-invalid{ outline:2px solid #c0392b; outline-offset:6px; border-radius:14px; }

  @media(max-width:640px){
    .sa-progress-wrap{ padding:13px 14px 12px; border-radius:15px; }
    .sa-steps{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; -webkit-overflow-scrolling:touch; }
    .sa-step-chip{ flex:0 0 auto; }
    .sa-stepnav{ justify-content:stretch; }
    .sa-stepnav .btn{ flex:1; justify-content:center; }
    .sa-stepnav-info{ order:3; width:100%; text-align:center; }
  }

/* ==========================================================================
   SELBSTAUSKUNFT — Druckansicht (identischer Aufbau wie der PDF-Export)
   ========================================================================== */

  #saPrintSheet{ display:none; }

  @media print{
    @page{ size:A4; margin:16mm 18mm 15mm; }

    body.sa-printing > *{ display:none !important; }
    body.sa-printing #saPrintSheet{
      display:block !important;
      position:static; width:100%;
      font-family:Helvetica, Arial, sans-serif;
      color:#141414; background:#fff;
    }
    body.sa-printing{ background:#fff; }

    #saPrintSheet .pr-head{ border-bottom:0.4mm solid #BEAA8C; padding-bottom:2mm; margin-bottom:6mm; }
    #saPrintSheet .pr-org{ font-size:16pt; font-weight:700; color:#3D2F22; line-height:1.15; }
    #saPrintSheet .pr-org-sub{ font-size:9pt; color:#505050; margin-top:1.5mm; }

    #saPrintSheet .pr-title{
      font-family:Helvetica, Arial, sans-serif;
      font-size:15pt; font-weight:700; color:#3D2F22; line-height:1.25; margin:0 0 3mm;
    }
    #saPrintSheet .pr-meta{ font-size:10.5pt; color:#3C3228; margin:0 0 7mm; }

    #saPrintSheet .pr-section{ break-inside:auto; margin-bottom:5mm; }
    #saPrintSheet .pr-section h2{
      font-size:11.5pt; font-weight:700; color:#8B452A;
      border-bottom:0.2mm solid #E1D2B9; padding-bottom:1.2mm; margin:0 0 2.5mm;
      break-after:avoid; page-break-after:avoid;
    }
    #saPrintSheet .pr-row{ margin-bottom:2.2mm; break-inside:avoid; page-break-inside:avoid; }
    #saPrintSheet .pr-label{ font-size:9.3pt; font-weight:700; color:#3D2F22; line-height:1.35; }
    #saPrintSheet .pr-value{ font-size:9.3pt; color:#141414; line-height:1.35; padding-left:4mm; white-space:pre-wrap; }

    /* Fussleiste wiederholt sich auf jeder Druckseite (wie im PDF-Export).
       position:fixed bezieht sich beim Druck auf den Seitenbereich innerhalb
       der @page-Raender, nicht auf das Fenster - dadurch wird das Element
       vom Browser auf jeder Seite erneut ausgegeben. */
    #saPrintSheet .pr-foot{
      position:fixed; left:0; right:0; bottom:0;
      background:#fff;
      border-top:0.3mm solid #BEAA8C; padding-top:2mm; margin:0;
      font-size:7.5pt; color:#5A4632; line-height:1.35;
    }
    #saPrintSheet .pr-foot strong{ font-weight:700; }
    /* Platz freihalten, damit Inhalt nicht unter die Fussleiste laeuft */
    body.sa-printing #saPrintSheet{ padding-bottom:11mm; }
  }

  .sa-demo-banner{
    display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px;
    background:#F0F3EA; border:1px solid var(--sage); border-left:5px solid var(--sage);
    border-radius:14px; padding:14px 18px; margin-bottom:20px;
    font-size:0.88rem; color:var(--umber); line-height:1.5;
  }
  .sa-demo-banner[hidden]{ display:none; }
  .sa-demo-banner strong{ color:#4A5840; }
  .sa-demo-banner a{ color:var(--rust-deep); text-decoration:underline; }