
























:root{
  --kupfer-text: var(--kupfer-dunkel);   
  --kupfer-hell-text: #E8A98F;           
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms ;transition-duration:.01ms }
}
body{
  margin:0;background:var(--parler-papier);
  font-family:var(--font-body);color:var(--parler-tinte);
  font-size:var(--fs-body);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--parler-tinte);font-weight:var(--fw-bold);line-height:var(--lh-heading);text-wrap:balance;margin:0}
p{margin:0 0 var(--space-4);text-wrap:pretty}
img{max-width:100%;display:block}
a{color:var(--kupfer-text);text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--parler-tinte)}
:focus-visible{outline:3px solid var(--kupfer-text);outline-offset:3px;border-radius:2px}

.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--space-5)}
.lesebreite{max-width:var(--container-narrow)}
section[id],footer[id]{scroll-margin-top:110px}
.eyebrow{font-family:var(--font-ui);font-size:var(--fs-label);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--kupfer-text);margin:0 0 var(--space-3);font-weight:var(--fw-semibold)}
.eyebrow.hell{color:var(--blau-5)}
.skip{position:absolute;left:-9999px;background:var(--parler-tinte);color:var(--white);padding:var(--space-3) var(--space-4);font-family:var(--font-ui);z-index:100}
.skip:focus{left:var(--space-4);top:var(--space-4)}
.nurLeser{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

 
.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  font-family:var(--font-ui);font-size:var(--fs-ui);font-weight:var(--fw-semibold);
  padding:14px var(--space-6);border-radius:var(--radius-md);min-height:44px;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:background var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard);
}
.knopf--haupt{background:var(--parler-tinte);color:var(--white);border-color:var(--parler-tinte)}
.knopf--haupt:hover{background:#0F2450;color:var(--white)}  
.knopf--neben{background:transparent;color:var(--parler-tinte);border-color:var(--parler-tinte)}
.knopf--neben:hover{background:var(--parler-tinte);color:var(--white)}
.knopf--hell{background:transparent;color:var(--white);border-color:rgba(255,255,255,.65)}
.knopf--hell:hover{background:var(--white);color:var(--parler-tinte)}
.knopf--akzent{background:var(--kupfer-text);color:var(--white);border-color:var(--kupfer-text)}
.knopf--akzent:hover{background:#8C432D;color:var(--white)}  

 
.hinweis{background:var(--parler-tinte);color:var(--white)}
.hinweis .wrap{display:flex;align-items:center;justify-content:center;gap:var(--space-3);min-height:44px;padding-top:8px;padding-bottom:8px;font-family:var(--font-ui);font-size:var(--fs-small);color:var(--white);text-decoration:none}
.hinweis .wrap:hover{background:#0F2450;color:var(--white)}
.hinweis .pfeil{color:var(--blau-5)}

 
.kopf{background:var(--parler-papier);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
.kopf .wrap{display:flex;align-items:center;gap:var(--space-5);padding-top:var(--space-3);padding-bottom:var(--space-3);flex-wrap:nowrap}




.marke{flex:none;line-height:0;display:inline-flex;align-items:center;min-height:44px}
.marke img{height:52px;width:auto;max-width:none}
.marke .minieule{display:none}
.hauptnav{margin-left:auto;display:flex;align-items:center;gap:var(--space-5);font-family:var(--font-ui);font-size:var(--fs-ui)}
.hauptnav a{color:var(--parler-tinte);text-decoration:none;padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap}
.hauptnav a:hover,.hauptnav a[aria-current="page"]{color:var(--kupfer-text);border-bottom-color:var(--parler-kupfer)}
.kopf-aktionen{display:flex;align-items:center;gap:var(--space-3);flex:none}
.kontaktknopf{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line-strong);border-radius:var(--radius-md);color:var(--parler-tinte)}
.kontaktknopf:hover{border-color:var(--kupfer-text);color:var(--kupfer-text)}
.kontaktknopf svg{width:19px;height:19px}
.menuknopf{display:none}

 
.kopfzeile-abschnitt{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-5);flex-wrap:wrap;margin-bottom:var(--space-7)}
.kopfzeile-abschnitt h2{font-size:clamp(27px,3.4vw,var(--fs-h2))}
.rechts{display:flex;align-items:center;gap:var(--space-4)}

 
.seitenkopf{background:var(--parler-feder);padding:var(--space-8) 0;border-bottom:1px solid var(--line)}
.brotkrumen{font-family:var(--font-ui);font-size:var(--fs-caption);color:var(--muted);margin:0 0 var(--space-4)}
.brotkrumen ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin:0;padding:0}
.brotkrumen li{display:flex;align-items:center}
.brotkrumen li::after{content:"·";margin-left:var(--space-2);color:var(--line-strong)}
.brotkrumen li:last-child::after{content:""}
 
.brotkrumen a{color:var(--muted);display:inline-block;padding:6px 0;min-height:26px}
.brotkrumen a:hover{color:var(--kupfer-text)}
.seitenkopf h1{font-size:clamp(32px,4.6vw,var(--fs-h1))}
.seitenkopf .einleitung{font-size:var(--fs-lead);max-width:60ch;margin:var(--space-5) 0 0}

 
.fuss{background:var(--parler-tinte);color:var(--white);padding:var(--space-8) 0 var(--space-6)}
.fuss a{color:#D5E0F2;text-decoration:none}
.fuss a:hover{color:var(--white);text-decoration:underline}
.fuss-oben{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:var(--space-7);padding-bottom:var(--space-7);border-bottom:1px solid rgba(255,255,255,.18)}
.fuss-marke img{height:60px;margin-bottom:var(--space-4)}
.fuss-marke p{color:#C6D3E8;font-size:var(--fs-small);max-width:34ch;margin:0}
.fuss h3{color:var(--white);font-family:var(--font-ui);font-size:var(--fs-label);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;font-weight:var(--fw-semibold);margin:0 0 var(--space-4)}
.fuss ul{list-style:none;margin:0;padding:0;font-size:var(--fs-small)}
.fuss li{margin-bottom:var(--space-1)}
 
.fuss ul a{display:inline-block;padding:10px 0;min-height:44px}
.fuss-unten{display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-7);justify-content:space-between;padding-top:var(--space-5);font-size:var(--fs-small);color:#C6D3E8}
.fuss-unten ul{display:flex;gap:var(--space-5);flex-wrap:wrap}
.fuss-unten li{margin:0}

 







:root{ --feld-rand: var(--blau-3, #4E72AD); }

.feld{margin-bottom:var(--space-5)}
.feld label{display:block;font-family:var(--font-ui);font-size:var(--fs-label);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--muted);
  font-weight:var(--fw-semibold);margin-bottom:var(--space-2)}
.feld .pflicht{color:var(--kupfer-text);margin-left:2px}
.feld input,.feld textarea,.feld select{
  width:100%;min-height:48px;padding:12px var(--space-4);
  font-family:var(--font-body);font-size:var(--fs-body);color:var(--parler-tinte);
  background:var(--white);border:1px solid var(--feld-rand);border-radius:var(--radius-md);
}
.feld textarea{min-height:150px;resize:vertical;line-height:var(--lh-body)}
.feld input:focus-visible,.feld textarea:focus-visible,.feld select:focus-visible{
  outline:3px solid var(--focus-ring);outline-offset:2px;border-color:var(--parler-tinte)}
.feld .beiblatt{font-family:var(--font-ui);font-size:var(--fs-caption);color:var(--muted);margin:var(--space-2) 0 0}
.feldpaar{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}
@media (max-width:560px){ .feldpaar{grid-template-columns:1fr;gap:0} }

 
.beispiel{font-family:var(--font-ui);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding:3px 8px;white-space:nowrap}
.platzhalter{display:flex;align-items:center;justify-content:center;height:100%;font-family:var(--font-ui);font-size:var(--fs-caption);color:var(--muted);text-align:center;padding:var(--space-4)}








@media (max-width:1190px){
  .hauptnav{gap:var(--space-4);font-size:14px}
  .kopf .wrap{gap:var(--space-4)}
  .neu-knopf{padding:14px var(--space-5)}
}
@media (max-width:1060px){
  .hauptnav{gap:var(--space-3);font-size:13.5px}
  .marke img{height:46px}
}
@media (max-width:1000px){
  .fuss-oben{grid-template-columns:1fr 1fr;gap:var(--space-6)}
}
 
@media (max-width:980px){
  :root{--section-y:64px}
  .hauptnav{display:none}
  .nur-breit{display:none}
   
  .kontaktknopf{display:none}
  .kopf .wrap{gap:var(--space-3)}
  .menuknopf{
    display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
    background:none;border:1px solid var(--line-strong);border-radius:var(--radius-md);
    min-height:44px;padding:10px var(--space-4);font-family:var(--font-ui);font-size:var(--fs-ui);
    color:var(--parler-tinte);cursor:pointer;flex:none;
  }
  .mobilnav{border-top:1px solid var(--line);background:var(--parler-papier)}
  .mobilnav ul{list-style:none;margin:0;padding:var(--space-3) 0 var(--space-5)}
  .mobilnav a{display:block;padding:14px var(--space-5);font-family:var(--font-ui);font-size:var(--fs-body);color:var(--parler-tinte);text-decoration:none;border-bottom:1px solid var(--line)}
  .mobilnav a:hover{background:var(--parler-feder);color:var(--kupfer-text)}
   
  .kopfzeile-abschnitt{flex-direction:column;align-items:flex-start;gap:var(--space-4)}
  .rechts{flex-direction:row-reverse;justify-content:flex-end;width:100%}
  .rechts .knopf{white-space:nowrap}
}
@media (max-width:560px){
  .fuss-oben{grid-template-columns:1fr}
   
  .marke .wortmarke{display:none}
  .marke .minieule{display:block;height:44px}
   
  .neu-knopf{padding:12px var(--space-4);font-size:14px}
  .menuknopf{padding:12px var(--space-3)}
  .kopf .wrap{gap:var(--space-2);padding-left:var(--space-4);padding-right:var(--space-4)}
  .hinweis .wrap{font-size:var(--fs-caption);gap:var(--space-2)}
}
@media (max-width:400px){
  .marke .minieule{height:38px}
  .neu-knopf{padding:12px 12px;font-size:13px}
}







.fuss :focus-visible,
.dunkel :focus-visible,
.nummern :focus-visible,
.weiter :focus-visible,
.aufruf :focus-visible,
.leitwort :focus-visible,
.uebergangskopf :focus-visible,
.ansprech :focus-visible{ outline-color: var(--focus-ring-invert); }































body{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.6 0 0 0 -0.22'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23k)'/%3E%3C/svg%3E");
  background-repeat:repeat;
  




}


.fuss,.dunkel,.hero{background-image:none}










:where([class*="karte"],[class*="kachel"],[class*="kasten"]):not([class*="karten"]):not([class*="kacheln"]){
  box-shadow:0 1px 2px rgba(22,51,106,.05), 0 0 0 .5px rgba(22,51,106,.02);
}











.eulenwende{display:flex;align-items:center;gap:var(--space-5);
  margin:var(--space-8) 0;color:var(--line-strong)}
.eulenwende::before,.eulenwende::after{content:"";flex:1;height:1px;
  background:currentColor}
.eulenwende img{height:26px;width:auto;flex:none;display:block}
.dunkel .eulenwende,.fuss .eulenwende{color:rgba(255,255,255,.28)}
















.js-bewegung .aufblende{opacity:0;transform:translateY(12px)}
.js-bewegung .aufblende.da{opacity:1;transform:none;
  transition:opacity 600ms var(--ease-standard),transform 600ms var(--ease-standard)}
@media (prefers-reduced-motion:reduce){
  .js-bewegung .aufblende{opacity:1;transform:none;transition:none}
}
























:root{
  --glas-flaeche:rgba(249,247,244,.72);    
  --glas-dicht:var(--parler-papier);       
  --glas-kante-oben:rgba(255,255,255,.60);
  --glas-kante-unten:rgba(22,51,106,.12);
  --glas-unschaerfe:22px;
  --glas-farbigkeit:1.7;    
}

.glas{
  position:relative;
  background:var(--glas-flaeche);
  -webkit-backdrop-filter:blur(var(--glas-unschaerfe)) saturate(var(--glas-farbigkeit));
  backdrop-filter:blur(var(--glas-unschaerfe)) saturate(var(--glas-farbigkeit));
  border-bottom:1px solid var(--glas-kante-unten);
  

  box-shadow:inset 0 1px 0 var(--glas-kante-oben);
}



.glas::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.9 0 0 0 -0.3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
}
 
.glas > *{position:relative;z-index:1}





@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glas{background:var(--glas-dicht)}
  .glas::after{opacity:.6}
}
@media (prefers-reduced-transparency:reduce){
  .glas{background:var(--glas-dicht);
    -webkit-backdrop-filter:none;backdrop-filter:none}
}











.kopf{background:var(--glas-flaeche);border-bottom-color:var(--glas-kante-unten);
  position:sticky;top:0;z-index:30}





.kopf .hauptnav a:hover,
.kopf .hauptnav a[aria-current="page"]{
  color:var(--parler-tinte);
  border-bottom-color:var(--parler-kupfer);
}
.kopf .hauptnav a[aria-current="page"]{font-weight:var(--fw-semibold)}










:where([class*="karte"],[class*="kachel"],[class*="kasten"]):not([class$="karten"]):not([class$="kacheln"]){
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),
             0 1px 2px rgba(22,51,106,.05),
             0 0 0 .5px rgba(22,51,106,.02);
}























.kopfzeile-abschnitt{
  border-top:1px solid var(--parler-tinte);
  padding-top:var(--space-5);
  margin-bottom:var(--space-7);
}


.kopfzeile-abschnitt > div:first-child{flex:1 1 auto;min-width:0}
.kopfzeile-abschnitt .eyebrow{margin-bottom:var(--space-3)}

 
.dunkel .kopfzeile-abschnitt,.fuss .kopfzeile-abschnitt{border-top-color:rgba(255,255,255,.34)}









h1{letter-spacing:-.018em}
.kopfzeile-abschnitt h2,.seitenkopf h1{letter-spacing:-.014em}
h2{text-wrap:balance}






.seitenkopf .einleitung{max-width:58ch;font-size:var(--fs-lead);line-height:1.55}














.wrap > .eyebrow:has(+ h2),
.wrap > h2:not(.eyebrow + h2):not(.nurLeser){
  border-top:1px solid var(--parler-tinte);
  padding-top:var(--space-5);
}
.wrap > .eyebrow:has(+ h2){margin-bottom:var(--space-3)}










.eulenwende + .eyebrow,.eulenwende + h2{border-top:0;padding-top:0}




.hero .eyebrow,.leitbild .eyebrow{border-top:0;padding-top:0}



[hidden] { display: none  ; }
html { scroll-padding-top: calc(var(--kopfhoehe, 78px) + 16px); }
section[id], footer[id], [id]:target { scroll-margin-top: calc(var(--kopfhoehe, 78px) + 20px); }
.kopf { isolation: isolate; }
.kopf .menuknopf[aria-expanded="true"] { background: var(--parler-tinte); color: #fff; border-color: var(--parler-tinte); }
.kopf .mobilnav a[aria-current="page"] { background: var(--parler-feder); font-weight: 700; }
.mobile-direkt { display: none; }
@media (max-width: 980px) {
  .kopf-aktionen { margin-left: auto; }
  .kopf .mobilnav {
    position: absolute; top: 100%; left: 0; right: 0;
    max-height: calc(100vh - var(--kopfhoehe, 78px));
    max-height: calc(100dvh - var(--kopfhoehe, 78px));
    overflow-y: auto; overscroll-behavior: contain;
    box-shadow: 0 18px 24px rgba(22,51,106,.12);
  }
  .kopf .mobilnav ul { margin: 0 auto; max-width: var(--container); padding: .5rem 1rem 1rem; }
  .kopf .mobilnav a { padding: .8rem .65rem; font-size: 1rem; min-height: 48px; }
  .kopf .mobilnav a:focus-visible { outline-offset: -3px; }
  .seitenkopf { padding: 2.5rem 0; }
}
@media (max-width: 560px) {
  :root { --section-y: 48px; }
  .wrap { padding-left: 20px; padding-right: 20px; }
  .kopf .wrap { min-height: 68px; padding: 10px 16px; gap: 10px; }
  .kopf .marke .minieule { height: 36px; }
  .kopf .neu-knopf { font-size: .875rem; padding: 10px 12px; }
  .kopf .menuknopf { font-size: .875rem; padding: 10px 12px; }
  .hinweis .wrap { text-align: center; font-size: .8125rem; line-height: 1.4; }
  .seitenkopf h1 { font-size: 2.4rem; }
  .seitenkopf .einleitung { font-size: 1.125rem; margin-top: 1rem; }
  .kopfzeile-abschnitt { margin-bottom: 1.5rem; padding-top: 1rem; }
  .kopfzeile-abschnitt h2 { font-size: 2rem; }
  .fuss { padding-top: 3rem; }
  .fuss-oben { gap: 1.75rem; }
  .fuss-marke img { max-width: 100%; width: auto; height: auto; max-height: 60px; }
}
