/* Weitwinkelherz – gemeinsame Regeln für alle Seiten */
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#0F1720}
img,video{max-width:100%}
/* Transparente Loops: Safari zeigt das Vorschaubild statt des WebM-Videos */
[data-noalpha]{display:none!important}
body.noalpha [data-noalpha]{display:block!important}
body.noalpha video[data-loop]{display:none!important}
/* Sichtbarer Tastatur-Fokus */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid #D7F36B;outline-offset:2px}
/* Reel-Filter auf der Startseite */
.reel[hidden]{display:none!important}
/* Leuchtkasten */
.lb[hidden]{display:none!important}
.tile[hidden]{display:none!important}
.lb-ki[hidden]{display:none!important}
/* Formular: Rückmeldung */
.form-note{margin:8px 0 0;font-size:13px;color:#D7F36B}

/* Portfolio-Titel */
.h1big{font-size:96px}
@container (max-width:900px){.h1big{font-size:48px}}

/* Handy: lange Listen einklappen (JS setzt data-more) */
.more-btn{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid rgba(255,255,255,.3);color:#FFFFFF;font-size:13px;margin-top:8px}
.more-btn:focus-visible{outline:2px solid #D7F36B;outline-offset:2px}
[data-more-hidden]{display:none!important}
/* Handy: kompaktere Abschnitte */
@container (max-width:900px){
 .wr .sec{padding-top:64px!important;padding-bottom:64px!important}
 .wr .see{min-height:640px!important;padding-bottom:40px}
 .wr .nutbox{height:260px!important}
 .wr .sky{height:360px!important}
}

/* Objekt-Loops: weicher Schein dahinter; am Handy klein und vor der Überschrift */
.loopbox{position:relative;isolation:isolate}
.loopbox::before{content:"";position:absolute;left:50%;top:50%;width:150%;height:150%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(255,226,160,.30),rgba(255,226,160,0));filter:blur(10px);z-index:-1;pointer-events:none}
@container (max-width:900px){
 .wr .loopbox{width:120px!important;max-width:120px;margin:0 0 22px!important}
 .wr .loopbox video,.wr .loopbox img{width:100%!important;height:auto!important;max-height:120px;object-fit:contain}
 .wr .rv:has(>.mob-first){display:flex;flex-direction:column}
 .wr .mob-first{order:-1}
}
/* Handy: kürzere Startseite – Leistungen, Ablauf, Schimpanse, Über mich kompakt */
@container (max-width:900px){
 /* Leistungen: Karten ohne Loop und Preiszeile */
 .wr #elemente .g4 article{padding:20px 22px!important;gap:8px!important;min-height:0!important}
 .wr #elemente .g4 article>div:nth-child(2){display:none!important}
 .wr #elemente .g4 article>div:first-child .it{width:36px!important;height:36px!important;font-size:15px!important}
 .wr #elemente .g4 article h3{font-size:19px!important}
 .wr #elemente .g4 article p.it{font-size:17px!important}
 .wr #elemente .g4 article p:nth-of-type(3){display:none!important}
 .wr #elemente .g4 article a{padding:4px 0!important;min-height:40px!important}
 /* Ablauf: vier Schritte als kompakte Zeilen */
 .wr #ablauf .g4>.rv{padding-top:14px!important;display:block}
 .wr #ablauf .g4>.rv p.lbl{margin:0 0 6px!important}
 .wr #ablauf .g4>.rv p:nth-of-type(2),.wr #ablauf .g4>.rv p:nth-of-type(3){display:inline!important;font-size:22px!important;margin:0 6px 0 0!important}
 .wr #ablauf .g4>.rv p:last-child{margin-top:4px!important;font-size:14px!important}
 .wr #ablauf .glass.rv{margin-top:40px!important;padding:24px!important;gap:20px!important}
 .wr #ablauf .glass.rv .split{gap:20px!important}
 .wr #ablauf .glass.rv .loopbox{display:none!important}
 .wr #ablauf .glass.rv .split>div:first-child>p:last-child{font-size:28px!important}
 .wr #ablauf .glass.rv .g3{gap:14px!important}
 .wr #ablauf .glass.rv .g3 h3{font-size:17px!important;margin:2px 0!important}
 .wr #ablauf .glass.rv .g3 p:not(.lbl){font-size:14px!important;margin:0!important}
 /* Schimpanse: nur Text, Bilder bleiben dem Desktop */
 .wr #affe{padding:56px 0!important}
 .wr #affe .peek{display:none!important}
 .wr #affe .g3{display:none!important}
 /* Über mich: Bild niedriger, Kennzahlen weg */
 .wr #robert>.wrap>.rv:first-child{aspect-ratio:4/3!important}
 .wr #robert .g3{display:none!important}
 /* Kennst du das: Punkte enger */
 .wr .sec .wrap.split>div>.rv[style*="grid-template-columns: 70px"]{grid-template-columns:40px minmax(0,1fr)!important;padding:18px 0!important}
 .wr .sec .wrap.split>div>.rv[style*="grid-template-columns: 70px"] p.it{font-size:22px!important}
 /* Kontakt: Formular enger */
 .wr #kontaktform{gap:10px!important;padding:22px!important}
 .wr #kontaktform textarea{min-height:0!important}
}
/* Handy: kleinere Überschriften, schlankere Buttons, kompaktes Formular */
@container (max-width:900px){
 .wr h1.h1{font-size:44px!important}
 .wr .h2{font-size:34px!important}
 .wr .heroR>div:first-child{display:none!important}
 .wr .desk{display:none!important}
 .wr .gloww{white-space:nowrap;font-size:13px!important;min-height:46px!important;padding:0 16px 0 6px!important;gap:8px!important}
 .wr .gloww img{width:32px!important;height:32px!important}
 .wr .mcall{flex:0 0 46px!important;height:46px!important}
 .wr [role="group"] button,.wr #kontaktform fieldset button{min-height:38px!important;padding:0 12px!important;font-size:12px!important}
 .wr [role="group"]{gap:4px!important;padding:4px!important}
 .wr #kontaktform{padding:20px!important;gap:6px!important}
 .wr #kontaktform fieldset{margin:0!important}
 .wr #kontaktform legend{margin-bottom:6px!important}
 .wr #kontaktform label{margin:6px 0 0!important}
 .wr #kontaktform input,.wr #kontaktform textarea{padding:4px 0 8px!important;min-height:40px!important;font-size:16px!important}
 .wr #kontaktform textarea{height:64px!important}
 .wr #kontaktform p{font-size:12px!important;margin:4px 0 0!important}
 .wr #kontaktform button[type="submit"]{min-height:48px!important;margin-top:6px!important}
 .wr .more-btn{min-height:40px}
}
@container (max-width:900px){
/* Handy: Wortmarke kleiner, damit Burger-Menü immer Platz hat */
.wr>header a[aria-label^="Weitwinkelherz"],.wr .hd .brand{flex:1 1 auto;min-width:0}
.wr .bg{flex:0 0 auto}
.wr>header a[aria-label^="Weitwinkelherz"]>span,.wr>header a[aria-label^="Weitwinkelherz"]>b,.wr .hd .brand b{font-size:13px!important;letter-spacing:.1em!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wr>header a[aria-label^="Weitwinkelherz"]>svg,.wr .hd .brand svg{width:26px!important;height:26px!important;flex:0 0 auto}
.wr>header>.wrap,.wr .hd .in{gap:10px!important}
}
/* Handy: Kopfzeile mit Hintergrund, damit Text beim Scrollen nicht durchscheint */
@container (max-width:900px){
 .wr>header,.wr .hd{background:rgba(15,23,32,.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding-top:12px!important;padding-bottom:12px!important}
}

/* Kopfzeile: oben transparent, nach dem Scrollen mit Hintergrund (alle Bildschirmgrößen) */
.wr>header,.wr .hd{transition:background .3s ease,transform .35s ease}
/* Beim Runterscrollen ausblenden, beim Hochscrollen einblenden */
body.hdr-hide .wr>header,body.hdr-hide .wr .hd{transform:translateY(-110%)}
@media (prefers-reduced-motion:reduce){.wr>header,.wr .hd{transition:none}}
body.scrolled .wr>header,body.scrolled .wr .hd{background:rgba(15,23,32,.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
/* Seitliche Abschnittsleiste (Desktop) */
.rail span.on{color:#FFFFFF}
.rail .rl{width:1px;height:28px;background:#FFFFFF;margin-left:6px}

/* Fußzeilen-Links: Tippziele mindestens 44 px hoch */
.wr footer nav a,.wr .ft nav a{display:inline-flex;align-items:center;min-height:44px}

@media (max-width:900px){
/* Handy: Wortmarke kleiner, damit Burger-Menü immer Platz hat */
.wr>header a[aria-label^="Weitwinkelherz"],.wr .hd .brand{flex:1 1 auto;min-width:0}
.wr .bg{flex:0 0 auto}
.wr>header a[aria-label^="Weitwinkelherz"]>span,.wr>header a[aria-label^="Weitwinkelherz"]>b,.wr .hd .brand b{font-size:13px!important;letter-spacing:.1em!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wr>header a[aria-label^="Weitwinkelherz"]>svg,.wr .hd .brand svg{width:26px!important;height:26px!important;flex:0 0 auto}
.wr>header>.wrap,.wr .hd .in{gap:10px!important}
}

/* Fallback für Browser ohne Container-Queries (ältere Safari): dieselben Regeln als Media-Query */
@media (max-width:900px){.h1big{font-size:48px}}
@media (max-width:900px){
 .wr .sec{padding-top:64px!important;padding-bottom:64px!important}
 .wr .see{min-height:640px!important;padding-bottom:40px}
 .wr .nutbox{height:260px!important}
 .wr .sky{height:360px!important}
}
@media (max-width:900px){
 .wr .loopbox{width:120px!important;max-width:120px;margin:0 0 22px!important}
 .wr .loopbox video,.wr .loopbox img{width:100%!important;height:auto!important;max-height:120px;object-fit:contain}
 .wr .rv:has(>.mob-first){display:flex;flex-direction:column}
 .wr .mob-first{order:-1}
}
@media (max-width:900px){
 /* Leistungen: Karten ohne Loop und Preiszeile */
 .wr #elemente .g4 article{padding:20px 22px!important;gap:8px!important;min-height:0!important}
 .wr #elemente .g4 article>div:nth-child(2){display:none!important}
 .wr #elemente .g4 article>div:first-child .it{width:36px!important;height:36px!important;font-size:15px!important}
 .wr #elemente .g4 article h3{font-size:19px!important}
 .wr #elemente .g4 article p.it{font-size:17px!important}
 .wr #elemente .g4 article p:nth-of-type(3){display:none!important}
 .wr #elemente .g4 article a{padding:4px 0!important;min-height:40px!important}
 /* Ablauf: vier Schritte als kompakte Zeilen */
 .wr #ablauf .g4>.rv{padding-top:14px!important;display:block}
 .wr #ablauf .g4>.rv p.lbl{margin:0 0 6px!important}
 .wr #ablauf .g4>.rv p:nth-of-type(2),.wr #ablauf .g4>.rv p:nth-of-type(3){display:inline!important;font-size:22px!important;margin:0 6px 0 0!important}
 .wr #ablauf .g4>.rv p:last-child{margin-top:4px!important;font-size:14px!important}
 .wr #ablauf .glass.rv{margin-top:40px!important;padding:24px!important;gap:20px!important}
 .wr #ablauf .glass.rv .split{gap:20px!important}
 .wr #ablauf .glass.rv .loopbox{display:none!important}
 .wr #ablauf .glass.rv .split>div:first-child>p:last-child{font-size:28px!important}
 .wr #ablauf .glass.rv .g3{gap:14px!important}
 .wr #ablauf .glass.rv .g3 h3{font-size:17px!important;margin:2px 0!important}
 .wr #ablauf .glass.rv .g3 p:not(.lbl){font-size:14px!important;margin:0!important}
 /* Schimpanse: nur Text, Bilder bleiben dem Desktop */
 .wr #affe{padding:56px 0!important}
 .wr #affe .peek{display:none!important}
 .wr #affe .g3{display:none!important}
 /* Über mich: Bild niedriger, Kennzahlen weg */
 .wr #robert>.wrap>.rv:first-child{aspect-ratio:4/3!important}
 .wr #robert .g3{display:none!important}
 /* Kennst du das: Punkte enger */
 .wr .sec .wrap.split>div>.rv[style*="grid-template-columns: 70px"]{grid-template-columns:40px minmax(0,1fr)!important;padding:18px 0!important}
 .wr .sec .wrap.split>div>.rv[style*="grid-template-columns: 70px"] p.it{font-size:22px!important}
 /* Kontakt: Formular enger */
 .wr #kontaktform{gap:10px!important;padding:22px!important}
 .wr #kontaktform textarea{min-height:0!important}
}
@media (max-width:900px){
 .wr h1.h1{font-size:44px!important}
 .wr .h2{font-size:34px!important}
 .wr .heroR>div:first-child{display:none!important}
 .wr .desk{display:none!important}
 .wr .gloww{white-space:nowrap;font-size:13px!important;min-height:46px!important;padding:0 16px 0 6px!important;gap:8px!important}
 .wr .gloww img{width:32px!important;height:32px!important}
 .wr .mcall{flex:0 0 46px!important;height:46px!important}
 .wr [role="group"] button,.wr #kontaktform fieldset button{min-height:38px!important;padding:0 12px!important;font-size:12px!important}
 .wr [role="group"]{gap:4px!important;padding:4px!important}
 .wr #kontaktform{padding:20px!important;gap:6px!important}
 .wr #kontaktform fieldset{margin:0!important}
 .wr #kontaktform legend{margin-bottom:6px!important}
 .wr #kontaktform label{margin:6px 0 0!important}
 .wr #kontaktform input,.wr #kontaktform textarea{padding:4px 0 8px!important;min-height:40px!important;font-size:16px!important}
 .wr #kontaktform textarea{height:64px!important}
 .wr #kontaktform p{font-size:12px!important;margin:4px 0 0!important}
 .wr #kontaktform button[type="submit"]{min-height:48px!important;margin-top:6px!important}
 .wr .more-btn{min-height:40px}
}
@media (max-width:900px){
 .wr>header,.wr .hd{background:rgba(15,23,32,.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding-top:12px!important;padding-bottom:12px!important}
}