/* Büro Albers Brand Guide · Stand Oktober 2026 */

@font-face{font-family:"IBM Plex Sans";src:url(../fonts/IBMPlexSans-Light.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(../fonts/IBMPlexSans-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(../fonts/IBMPlexSans-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(../fonts/IBMPlexSans-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(../fonts/IBMPlexSans-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"IBM Plex Sans Condensed";src:url(../fonts/IBMPlexSansCondensed-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Sans Condensed";src:url(../fonts/IBMPlexSansCondensed-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"IBM Plex Sans Condensed";src:url(../fonts/IBMPlexSansCondensed-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"IBM Plex Serif";src:url(../fonts/IBMPlexSerif-Light.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"IBM Plex Serif";src:url(../fonts/IBMPlexSerif-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  --navy:#004a7d;
  --navy-tief:#003a63;
  --cyan:#008bd2;
  --blau:#0075bf;
  --gruen:#80ba27;
  --flaeche-kuehl:#e6ecef;
  --flaeche-warm:#eff0e8;
  --flaeche-grau:#ececec;
  --text:#3d3d3c;
  --text-grau:#646363;
  --linie:#b2b2b1;
  --linie-hell:#d9e1e6;
  --weiss:#fff;

  --sans:"IBM Plex Sans",Arial,sans-serif;
  --cond:"IBM Plex Sans Condensed","IBM Plex Sans",Arial,sans-serif;
  --serif:"IBM Plex Serif",Georgia,serif;

  --ease:cubic-bezier(.22,1,.36,1);
  --dauer:.24s;
  --schatten:0 14px 32px -10px rgba(0,58,99,.28);

  --nav-b:272px;
  --rand:clamp(20px,5vw,72px);
  --schraege:clamp(36px,6.5vw,110px);

  --z-topbar:20;--z-nav:30;--z-skip:40;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--weiss);color:var(--text);font:400 17px/1.6 var(--sans);text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:var(--blau);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--navy)}
:focus-visible{outline:3px solid var(--blau);outline-offset:3px}
h1,h2,h3{color:var(--navy);text-wrap:balance;margin:0}
h2{font-size:clamp(26px,2.6vw,34px);line-height:1.15;font-weight:600;letter-spacing:-.005em}
h3{font-size:19px;line-height:1.3;font-weight:600}
p{margin:0 0 1em;text-wrap:pretty}
code{font:500 15px/1.4 var(--cond);letter-spacing:.02em}
b,strong{font-weight:600}

.skip{position:absolute;left:12px;top:-60px;z-index:var(--z-skip);background:var(--navy);color:#fff;padding:10px 14px;border-radius:6px;transition:top var(--dauer) var(--ease)}
.skip:focus{top:12px}

/* ---------- Seitennavigation ---------- */
.nav{position:fixed;inset:0 auto 0 0;width:var(--nav-b);background:var(--navy);color:#fff;display:flex;flex-direction:column;overflow-y:auto;z-index:var(--z-nav);overscroll-behavior:contain}
.nav__logo{display:block;padding:30px 28px 26px}
.nav__logo img{width:168px}
.nav__bereich{padding:0 16px}
.nav__gruppe{border-top:1px solid rgba(255,255,255,.14);padding:10px 0}
.nav__gruppe summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:10px 12px;font:600 13px/1 var(--cond);letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.78);border-radius:6px}
.nav__gruppe summary::-webkit-details-marker{display:none}
.nav__gruppe summary::after{content:"";width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform var(--dauer) var(--ease)}
.nav__gruppe[open] summary::after{transform:rotate(225deg) translateY(-2px)}
.nav__gruppe summary:hover{color:#fff}
.nav ul{list-style:none;margin:0;padding:0}
.nav li a{position:relative;display:block;padding:9px 12px 9px 32px;color:rgba(255,255,255,.9);text-decoration:none;font-size:16px;border-radius:6px;transition:background-color var(--dauer) var(--ease),color var(--dauer) var(--ease)}
.nav li a::before{content:"";position:absolute;left:13px;top:50%;width:9px;height:9px;margin-top:-4.5px;background:var(--gruen);border-radius:2px;transform:scale(0);transition:transform var(--dauer) var(--ease)}
.nav li a:hover{background:rgba(255,255,255,.08);color:#fff}
.nav li a[aria-current="page"]{background:rgba(255,255,255,.12);color:#fff;font-weight:600}
.nav li a[aria-current="page"]::before,.nav li a:hover::before{transform:scale(1)}
.nav__start{padding:0 0 10px}
.nav__pdf{display:flex;align-items:center;gap:10px;margin:18px 16px 0;padding:13px 16px;background:#fff;color:var(--navy);border-radius:8px;text-decoration:none;font-weight:600;font-size:15px;transition:transform var(--dauer) var(--ease),box-shadow var(--dauer) var(--ease)}
.nav__pdf:hover{color:var(--navy);transform:translateY(-2px);box-shadow:0 10px 22px -10px rgba(0,0,0,.45)}
.nav__pdf svg{flex:none}
.nav__fuss{margin-top:auto;padding:28px;font-size:14px;line-height:1.5;color:rgba(255,255,255,.78)}
.nav__fuss a{color:#fff}

.topbar{display:none}

/* ---------- Hauptbereich ---------- */
.main{margin-left:var(--nav-b)}
.seite{max-width:1180px;padding:0 var(--rand) 40px}
.lead{font:400 clamp(19px,1.7vw,23px)/1.5 var(--sans);color:var(--navy);max-width:40em;margin:clamp(28px,4vw,48px) 0 0}

/* Hero mit schräger Bildkante und Navy-Balken */
.hero{position:relative;height:clamp(360px,60vh,660px);background:var(--weiss)}
.hero--start{height:clamp(480px,86vh,900px)}
.hero__bild{position:absolute;inset:0;clip-path:polygon(0 0,100% 0,100% calc(100% - var(--schraege)),0 100%);overflow:hidden;background:var(--flaeche-kuehl)}
.hero__bild img{width:100%;height:100%;object-fit:cover;animation:hero-zoom 1.6s var(--ease) both}
@keyframes hero-zoom{from{transform:scale(1.045)}to{transform:none}}
.hero h1{position:absolute;left:var(--rand);bottom:calc(var(--schraege) * .55);display:flex;flex-direction:column;align-items:flex-start;gap:6px;font-size:clamp(32px,5vw,64px);line-height:1.04;font-weight:600;letter-spacing:-.01em;max-width:calc(100% - 2 * var(--rand))}
.hero--start h1{font-size:clamp(40px,7vw,92px);bottom:calc(var(--schraege) * .7)}
.hero h1 span{background:var(--navy);color:#fff;padding:.08em .32em .14em;box-decoration-break:clone;-webkit-box-decoration-break:clone;animation:balken .9s var(--ease) both}
.hero h1 span:nth-child(2){animation-delay:.08s;margin-left:.6em}
@keyframes balken{from{transform:translateX(-28px)}to{transform:none}}
.hero__credit{position:absolute;right:0;bottom:var(--schraege);margin:0;background:var(--navy);color:#fff;font:500 13px/1 var(--sans);padding:8px 14px;letter-spacing:.01em}
.hero__tagline{position:absolute;right:var(--rand);top:clamp(28px,7vh,72px)}

.tagline{display:flex;flex-direction:column;align-items:flex-end;gap:6px;margin:0;font:400 clamp(19px,1.9vw,26px)/1.25 var(--cond)}
.tagline span{background:rgba(255,255,255,.95);color:var(--cyan);padding:3px 12px 5px}
.tagline span:nth-child(1){margin-right:2.6em}
.tagline span:nth-child(2){margin-right:1.3em}

/* Abschnitte */
.abschnitt{margin-top:clamp(64px,8vw,104px)}
.abschnitt > h2{margin-bottom:22px}
.abschnitt > p,.text{max-width:68ch}
.band{margin-top:clamp(64px,8vw,104px);margin-left:calc(-1 * var(--rand));margin-right:calc(-1 * var(--rand));padding:clamp(40px,5vw,64px) var(--rand);background:var(--flaeche-kuehl)}
.band--warm{background:var(--flaeche-warm)}
.band > h2{margin-bottom:22px}
.hinweis{font-size:15px;color:var(--text-grau)}
.serif{font:300 19px/1.65 var(--serif);color:#1d1d1b;max-width:62ch}
.initial::first-letter{float:left;font:300 4.4em/.8 var(--serif);color:var(--cyan);margin:.08em .1em 0 0}

.liste{list-style:none;margin:0;padding:0;max-width:68ch}
.liste li{position:relative;padding:6px 0 6px 24px}
.liste li::before{content:"";position:absolute;left:2px;top:.95em;width:8px;height:8px;background:var(--gruen);border-radius:2px}
.zweispaltig{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 56px}
.zweispaltig h3{margin-bottom:8px}

/* Tabellen */
.tabelle{overflow-x:auto;margin:0 0 8px;-webkit-overflow-scrolling:touch}
.tabelle table{width:100%;border-collapse:collapse;min-width:560px;font-size:16px}
.tabelle th{text-align:left;font:600 13px/1.2 var(--cond);letter-spacing:.08em;text-transform:uppercase;color:var(--navy);padding:0 16px 12px 0;border-bottom:2px solid var(--navy)}
.tabelle td{padding:14px 16px 14px 0;border-bottom:1px solid var(--linie-hell);vertical-align:top}
.tabelle td .hinweis{display:block;margin-top:2px}
.ok{color:#3d6b0f;font-weight:600}
.nok{color:#a1281f;font-weight:600}

/* Buttons und Links */
.btn{display:inline-flex;align-items:center;gap:10px;font:600 16px/1 var(--sans);padding:15px 22px;border-radius:12px;background:var(--blau);color:#fff;text-decoration:none;border:1.5px solid var(--blau);cursor:pointer;transition:background-color var(--dauer) var(--ease),border-color var(--dauer) var(--ease),transform var(--dauer) var(--ease)}
.btn:hover{background:var(--navy);border-color:var(--navy);color:#fff;transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn--sek{background:#fff;color:var(--navy);border-color:var(--navy)}
.btn--sek:hover{background:var(--navy);color:#fff}
.btn--klein{font-size:14px;padding:9px 14px;border-radius:9px}
.pfeil{transition:transform var(--dauer) var(--ease)}
.btn:hover .pfeil,a:hover > .pfeil{transform:translateX(4px)}
.wlink{color:var(--blau);text-decoration:none;font-weight:600;background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;padding-bottom:2px;transition:background-size var(--dauer) var(--ease)}
.wlink:hover{background-size:100% 2px}

/* Startseite: Kapitelraster */
.kapitel{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:minmax(0,auto);gap:20px;margin-top:28px}
.kachel{grid-column:span 2;display:flex;flex-direction:column;text-decoration:none;color:var(--text);background:#fff;border:1px solid var(--linie-hell);border-radius:10px;overflow:hidden;transition:transform var(--dauer) var(--ease),box-shadow var(--dauer) var(--ease),border-color var(--dauer) var(--ease)}
.kachel:hover,.kachel:focus-visible{transform:translateY(-6px);box-shadow:var(--schatten);border-color:transparent;color:var(--text)}
.kachel__medium{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--flaeche-kuehl)}
.kachel__medium img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.kachel:hover .kachel__medium img{transform:scale(1.05)}
.kachel__text{padding:18px 20px 22px}
.kachel__text h3{display:flex;justify-content:space-between;gap:12px;margin-bottom:6px}
.kachel__text p{margin:0;font-size:15px;line-height:1.5;color:var(--text-grau)}
.kachel--gross{grid-column:span 4;grid-row:span 2}
.kachel--gross .kachel__medium{aspect-ratio:auto;flex:1;min-height:320px}
.kachel--gross h3{font-size:24px}
.kachel--halb{grid-column:span 3}
.kachel--halb .kachel__medium{aspect-ratio:16/8}
.kachel__logo{position:absolute;inset:0;display:grid;place-items:center;background:#fff}
.kachel__logo img{width:62%;height:auto;object-fit:contain}
.kachel:hover .kachel__logo img{transform:none}
.kachel__logo,.kachel__aa{border-bottom:1px solid var(--linie-hell)}
.kachel__farben{position:absolute;inset:0;display:grid;grid-template-columns:2fr 1.4fr 1fr .6fr}
.kachel__aa{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:space-between;padding:16px 20px;background:var(--flaeche-kuehl);color:var(--navy)}
.kachel__aa b{font:600 clamp(48px,5vw,76px)/1 var(--sans);letter-spacing:-.02em}
.kachel__aa span{font:300 clamp(48px,5vw,76px)/1 var(--serif);color:var(--cyan)}
.pdf-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;margin-top:20px;padding:28px clamp(22px,3vw,40px);background:var(--navy);color:#fff;border-radius:10px}
.pdf-band h3{color:#fff;font-size:22px;margin-bottom:4px}
.pdf-band p{margin:0;color:rgba(255,255,255,.85)}
.pdf-band .btn{background:#fff;color:var(--navy);border-color:#fff}
.pdf-band .btn:hover{background:var(--gruen);border-color:var(--gruen);color:var(--navy)}

/* Marke: Leistungsbereiche */
.leistungen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:2px solid var(--navy)}
.leistungen div{padding:20px 24px 22px 0;border-bottom:1px solid var(--linie-hell)}
.leistungen div:not(:nth-child(3n+1)){padding-left:24px;border-left:1px solid var(--linie-hell)}
.leistungen h3{margin-bottom:6px}
.leistungen p{margin:0;font-size:15.5px;color:var(--text-grau)}
.pruefung{margin-top:28px;padding:28px 32px;background:var(--navy);color:#fff;border-radius:10px;max-width:880px}
.pruefung h3{color:#fff;margin-bottom:8px;font:600 14px/1.2 var(--cond);letter-spacing:.09em;text-transform:uppercase}
.pruefung p{margin:0;font-size:clamp(19px,1.8vw,23px);line-height:1.45}

/* Logos */
.logos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.logo-feld{display:grid;place-items:center;aspect-ratio:16/9;background:#fff;border:1px solid var(--linie-hell);border-radius:10px;padding:10%}
.logo-feld img{max-height:100%;width:auto;max-width:78%;object-fit:contain}
.logo-feld--navy{background:var(--navy);border-color:var(--navy)}
.logo-feld--platzhalter{background:var(--flaeche-grau);color:var(--text-grau);text-align:center;font-size:15px}
.logo-info{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px 20px;padding:16px 2px 0}
.logo-info h3{margin-bottom:2px}
.logo-info p{margin:0;font-size:15.5px;color:var(--text-grau)}
.schutzzone{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,4vw,56px);align-items:center}
.schutzzone figure{margin:0;padding:clamp(28px,4vw,48px);background:#fff;border:1px dashed var(--cyan);border-radius:10px;position:relative}
.schutzzone figure img{margin:auto;width:100%;max-width:340px;outline:clamp(18px,2.4vw,30px) solid rgba(0,139,210,.12)}
.verbote{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.verbote figure{margin:0}
.verbote .feld{position:relative;display:grid;place-items:center;aspect-ratio:3/2;background:#fff;border:1px solid var(--linie-hell);border-radius:10px;overflow:hidden;padding:12%}
.verbote .feld::after{content:"";position:absolute;inset:0;background:linear-gradient(to top right,transparent calc(50% - 1.5px),#c0392b calc(50% - 1.5px),#c0392b calc(50% + 1.5px),transparent calc(50% + 1.5px))}
.verbote img{width:100%;height:auto}
.verbote figcaption{padding-top:10px;font-size:15.5px}
.verbote figcaption b{color:#a1281f}

/* Farben */
.farben{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.farbe{border:1px solid var(--linie-hell);border-radius:10px;overflow:hidden;background:#fff}
.farbe__feld{display:flex;flex-direction:column;justify-content:flex-end;min-height:170px;padding:20px 22px;color:#fff}
.farbe__feld b{font-size:24px;line-height:1.1}
.farbe__feld span{font-size:14px;opacity:.9}
.farbe__werte{list-style:none;margin:0;padding:8px 22px}
.farbe__werte li{display:grid;grid-template-columns:76px 1fr auto;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--linie-hell)}
.farbe__werte li:last-child{border-bottom:0}
.farbe__werte span{font-size:14px;color:var(--text-grau)}
.farbe__einsatz{margin:0;padding:14px 22px 20px;font-size:15.5px;border-top:1px solid var(--linie-hell)}
.kopieren{font:600 13px/1 var(--sans);color:var(--navy);background:#fff;border:1px solid var(--linie);border-radius:7px;padding:7px 10px;cursor:pointer;transition:background-color var(--dauer) var(--ease),color var(--dauer) var(--ease),border-color var(--dauer) var(--ease)}
.kopieren:hover{border-color:var(--navy)}
.kopieren.ist-kopiert{background:var(--navy);border-color:var(--navy);color:#fff}
.neutral{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 20px}
.neutral div{font-size:15px;line-height:1.45}
.neutral i{display:block;height:84px;border-radius:8px;margin-bottom:10px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.neutral b{display:block;color:var(--navy)}
.neutral small{color:var(--text-grau);font-size:14px}

/* Typografie */
.schrift{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:20px clamp(28px,4vw,56px);padding:32px 0;border-top:1px solid var(--linie-hell)}
.schrift:last-child{border-bottom:1px solid var(--linie-hell)}
.schrift h3{font-size:21px;margin-bottom:6px}
.schrift p{font-size:15.5px;color:var(--text-grau);margin-bottom:12px}
.tag{display:inline-block;font:500 13px/1 var(--sans);color:var(--navy);background:var(--flaeche-kuehl);padding:6px 9px;border-radius:5px;margin:0 6px 6px 0}
.schrift__probe{font-size:clamp(32px,3.6vw,48px);line-height:1.1;color:var(--navy)}
.schrift__probe small{display:block;margin-top:16px;font-size:16px;line-height:1.6;color:var(--text);letter-spacing:.02em}

/* Bilder */
.galerie{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.bild{position:relative;margin:0;overflow:hidden;background:var(--flaeche-kuehl)}
.bild img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.bild:hover img{transform:scale(1.04)}
.bild figcaption{position:absolute;right:0;bottom:0;background:var(--navy);color:#fff;font:500 13.5px/1.2 var(--sans);padding:8px 12px}
.galerie .bild{grid-column:span 2;aspect-ratio:4/3}
.galerie .bild--breit{grid-column:span 4;aspect-ratio:auto}
.galerie .bild--hoch{grid-row:span 2;aspect-ratio:auto}
.galerie .bild--voll{grid-column:1/-1;aspect-ratio:21/8}
.bild--schraeg{clip-path:polygon(0 0,100% 0,100% 72%,0 100%)}
.bild--schraeg figcaption{bottom:28%}
.paar{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
.paar--umgekehrt{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
.paar .bild{aspect-ratio:4/3}
.tagline-demo{position:relative;aspect-ratio:4/3;overflow:hidden}
.tagline-demo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tagline-demo .tagline{position:absolute;right:24px;top:24px;font-size:clamp(17px,1.6vw,22px)}
.daten{max-width:640px;padding:22px 26px;background:var(--flaeche-kuehl);font:400 16px/1.7 var(--cond);color:#1d1d1b}
.daten .titel{font:700 15px/1 var(--cond);letter-spacing:.08em;text-transform:uppercase;color:var(--cyan);margin-bottom:12px}
.daten b{color:var(--navy);font-weight:600;margin-right:.3em}
.daten b:not(:first-of-type){margin-left:.6em}

/* UI Design Beispiele */
.ui-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;padding:32px;background:var(--flaeche-kuehl);border-radius:10px;margin-bottom:24px}
.webkarten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:32px;background:var(--flaeche-kuehl);border-radius:10px}
.webkarte{display:block;background:#fff;border-radius:8px;overflow:hidden;text-decoration:none;color:var(--text);transition:transform var(--dauer) var(--ease),box-shadow var(--dauer) var(--ease)}
.webkarte:hover{transform:translateY(-6px) scale(1.02);box-shadow:var(--schatten);color:var(--text)}
.webkarte .m{aspect-ratio:4/3;overflow:hidden}
.webkarte .m img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.webkarte:hover .m img{transform:scale(1.06)}
.webkarte .t{padding:16px 18px 20px}
.webkarte h3{font-size:18px;margin-bottom:4px}
.webkarte p{margin:0;font-size:15px;color:var(--text-grau)}

/* Downloads */
.downloads{border-top:2px solid var(--navy)}
.downloads div{display:grid;grid-template-columns:minmax(0,1fr) 90px auto;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--linie-hell)}
.downloads b{color:var(--navy)}
.downloads span{display:block;font-size:15px;color:var(--text-grau)}
.downloads em{font-style:normal;font-size:15px;color:var(--text-grau);text-align:right}

/* Kapitelwechsel */
.weiter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:clamp(72px,9vw,120px)}
.weiter a{display:flex;flex-direction:column;gap:4px;padding:22px 24px;border:1px solid var(--linie-hell);border-radius:10px;text-decoration:none;color:var(--navy);font-size:21px;font-weight:600;transition:border-color var(--dauer) var(--ease),transform var(--dauer) var(--ease),box-shadow var(--dauer) var(--ease)}
.weiter a:hover{border-color:transparent;box-shadow:var(--schatten);transform:translateY(-4px)}
.weiter small{font:600 13px/1 var(--cond);letter-spacing:.09em;text-transform:uppercase;color:var(--text-grau)}
.weiter .naechstes{grid-column:2;text-align:right;align-items:flex-end}

/* Rechtliches */
.recht{padding-top:clamp(48px,7vw,96px)}
.recht h1{font-size:clamp(34px,4.4vw,52px);font-weight:600;letter-spacing:-.01em}
.recht .abschnitt{margin-top:44px}
.recht .abschnitt > h2{font-size:22px;margin-bottom:10px}

/* Fuß */
.fuss{margin-left:var(--nav-b);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 28px;padding:28px var(--rand);margin-top:24px;border-top:1px solid var(--linie-hell);font-size:15px;color:var(--text-grau)}
.fuss nav{display:flex;flex-wrap:wrap;gap:8px 24px}
.fuss a{color:var(--text-grau)}
.fuss a:hover{color:var(--navy)}

/* Einblenden beim Scrollen, nur wo der Browser es nativ kann; Inhalte bleiben sonst sofort sichtbar */
@supports (animation-timeline:view()){
  .zeigen{animation:auftauchen linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
  @keyframes auftauchen{from{opacity:.001;transform:translateY(22px)}to{opacity:1;transform:none}}
}

/* ---------- Tablet ---------- */
@media (max-width:1100px){
  :root{--nav-b:0px}
  .topbar{position:sticky;top:0;z-index:var(--z-topbar);display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 var(--rand);background:var(--navy)}
  .topbar a img{width:132px}
  .menu-btn{display:inline-flex;align-items:center;gap:8px;font:600 15px/1 var(--sans);color:#fff;background:transparent;border:1.5px solid rgba(255,255,255,.5);border-radius:9px;padding:10px 14px;cursor:pointer}
  .menu-btn svg{width:18px;height:18px}
  .nav{width:min(320px,86vw);transform:translateX(-100%);transition:transform .32s var(--ease),visibility 0s linear .32s;visibility:hidden}
  .nav.ist-offen{transform:none;visibility:visible;transition:transform .32s var(--ease);box-shadow:0 0 0 100vmax rgba(0,26,46,.45)}
  .kapitel{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kachel,.kachel--halb{grid-column:span 1}
  .kachel--gross{grid-column:span 2;grid-row:auto}
  .kachel--gross .kachel__medium{min-height:0;aspect-ratio:16/9;flex:none}
  .kachel--halb .kachel__medium{aspect-ratio:16/10}
  .neutral{grid-template-columns:repeat(2,minmax(0,1fr))}
  .webkarten{grid-template-columns:repeat(2,minmax(0,1fr))}
  .leistungen{grid-template-columns:repeat(2,minmax(0,1fr))}
  .leistungen div:not(:nth-child(3n+1)){padding-left:0;border-left:0}
  .leistungen div:nth-child(even){padding-left:24px;border-left:1px solid var(--linie-hell)}
  .galerie{grid-template-columns:repeat(2,minmax(0,1fr))}
  .galerie .bild,.galerie .bild--breit{grid-column:span 1;aspect-ratio:4/3}
  .galerie .bild--hoch{grid-row:auto}
  .galerie .bild--voll{grid-column:1/-1;aspect-ratio:16/9}
  .galerie .bild--breit:first-child{grid-column:span 2;aspect-ratio:16/9}
}

/* ---------- Mobil ---------- */
@media (max-width:720px){
  body{font-size:16px}
  :root{--rand:16px;--schraege:32px}
  .hero{height:auto;aspect-ratio:4/3.4}
  .hero--start{aspect-ratio:4/5;height:auto}
  .hero h1{font-size:clamp(26px,8vw,34px);bottom:calc(var(--schraege) * .4)}
  .hero--start h1{font-size:clamp(34px,11vw,48px)}
  .hero__tagline,.hero__credit{display:none}
  .lead{font-size:18px}
  .zweispaltig,.logos,.farben,.schutzzone,.paar,.paar--umgekehrt,.weiter{grid-template-columns:minmax(0,1fr)}
  .weiter .naechstes{grid-column:auto}
  .kapitel{grid-template-columns:minmax(0,1fr);gap:16px}
  .kachel,.kachel--gross,.kachel--halb{grid-column:auto}
  .verbote{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .leistungen{grid-template-columns:minmax(0,1fr)}
  .leistungen div,.leistungen div:nth-child(even){padding-left:0;border-left:0}
  .schrift{grid-template-columns:minmax(0,1fr);padding:24px 0}
  .webkarten{grid-template-columns:minmax(0,1fr);padding:16px}
  .ui-zeile{padding:20px}
  .galerie{grid-template-columns:minmax(0,1fr)}
  .galerie .bild--breit:first-child{grid-column:auto;aspect-ratio:4/3}
  .downloads div{grid-template-columns:minmax(0,1fr) auto}
  .downloads em{display:none}
  .farbe__werte li{grid-template-columns:64px 1fr auto}
  .pruefung{padding:22px}
  .band{padding:36px var(--rand)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition-duration:.01ms !important}
}

@media print{
  .nav,.topbar,.fuss,.weiter{display:none}
  .main{margin:0}
  .hero{height:320px}
}