/* Kyburg Backyard — gemeinsames Blatt aller Seiten: Tokens (tokens/*.css), Grundregeln, Fuss (Footer.dc.html). Generiert, Quelle bleibt das Projekt. */
:root {
  --font-display: Anton, "Arial Narrow", sans-serif;
  --font-ui: "Space Grotesk", system-ui, sans-serif;
  --font-data: "Space Mono", ui-monospace, monospace;
  --font-mark: "Instrument Serif", Georgia, serif;
}
:root {
  --ink-900: #0F0D0A;   
  --ink-800: #12100D;   
  --ink-700: #1C1914;   
  --ink-950: #0A0906;   
  --bone: #EDE8DB;      
  --bone-dim: #9A958A;  
  --bone-mute: #6B665C; 
  --volt: #C6F000;         
  --volt-hover: #B4DA00;   
  --volt-press: #8FAC00;   
  --volt-10: rgba(198, 240, 0, .1);  
  --volt-20: rgba(198, 240, 0, .2);  
  --volt-40: rgba(198, 240, 0, .4);  
  --blood: #C4302B;      
  --blood-text: #E2564E; 
  --text-1: var(--bone);
  --text-2: var(--bone-dim);
  --text-3: var(--bone-mute);
  --surface-page: var(--ink-800);   
  --surface-card: var(--ink-900);   
  --surface-field: var(--ink-950);  
  --surface-hero: var(--ink-900);   
  --surface-band: var(--ink-700);   
  --action-text: var(--ink-900);    
}
:root {
  --mark-hero-xl: clamp(96px, min(20vw, (100vw - 2 * var(--pad-desktop) - var(--s-32)) / 4.4), 240px);
  --mark-hero-size: clamp(56px, 16.9vw, 144px); 
  --mark-hero-indent: 1.1em;                    
  --mark-desc: .17em;  
  --title-l-size: clamp(34px, 4.6vw, 66px);  
  --title-l-lh: 1.1;          
  --title-m-size: clamp(28px, 3.4vw, 42px);  
  --menu-size: clamp(27px, 7.8vw, 36px);     
  --body-l-size: 19px;        
  --body-l-lh: 1.55;
  --body-size: 16px;          
  --body-s-size: 15px;        
  --body-lh: 1.6;
  --list-lh: 1.5;             
  --body-measure: 52ch;
  --voice-measure: 40ch;      
  --field-size: 16px;
  --ui-size: 15px;            
  --ui-s-size: 13px;          
  --mark-size: 13px;          
  --nav-size: 13px;           
  --ui-tracking: .06em;
  --data-l-size: 32px;        
  --data-size: 18px;          
  --data-tracking: .08em;
  --label-size: 13px;         
  --label-s-size: 11px;       
  --micro-size: 10.5px;       
  --ticker-size: 13px;
  --ticker-size-s: 11px;
  --label-tracking: .12em;
  --mono-word: -.28em;
}
@media (max-width: 810px) {
  :root {
    --body-l-size: 17px;
    --body-size: 15px;
    --data-l-size: 26px;
    --data-size: 16px;
    --label-size: 12px;
    --label-s-size: 11px; 
  }
}
@media (max-width: 480px) {
  :root {
    --data-size: 15px;
    --label-size: 11px;
  }
}
:root {
  --s-4: 4px;    
  --s-8: 8px;    
  --s-12: 12px;  
  --s-16: 16px;  
  --s-24: 24px;  
  --s-32: 32px;  
  --s-48: 48px;  
  --s-56: 56px;  
  --s-64: 64px;  
  --s-96: 96px;  
  --w-herozelle: clamp(320px, 33vw, 400px); 
  --pad-desktop: 56px;
  --pad-tablet: 40px;
  --pad-mobile: 20px;
  --h-cta: 58px;
  --h-cta-mobile: 54px;
  --h-field: 48px;        
  --h-bar: 64px;
  --h-bar-mobile: 56px;
  --hit-pointer: 36px;
  --hit-min: 44px;
  --w-hero-block: 450px;  
  --w-content: 1200px;
  --w-cell: 320px;
  --w-key: 160px;
  --icon: 22px;           
}
:root {
  --ease-move: cubic-bezier(.2, .7, .3, 1);
  --ease-value: linear;
  --dur-state: 120ms;     
  --dur-fade: 160ms;      
  --dur-move: 200ms;      
  --dur-surface: 240ms;   
  --delay-cta-return: 60ms; 
  --hero-interval: 6s;    
  --ticker-speed: 70px;   
}
:root {
  --glass-bg: rgba(15, 13, 10, .88);
  --glass-blur: 12px;
  --glass-border: 1px solid var(--volt-20);
  --glow-volt: 0 0 32px rgba(198, 240, 0, .35);
  --focus-outline: 2px solid var(--bone);
  --focus-offset: 2px;
}
html{background:var(--ink-900);-webkit-text-size-adjust:100%}
*{box-sizing:border-box}
::selection{background:var(--volt);color:var(--action-text)}
:focus-visible{outline:var(--focus-outline);outline-offset:var(--focus-offset)}
:focus:not(:focus-visible){outline:none}
.sf{background:var(--surface-card);padding:var(--s-56) 0 var(--s-24);box-sizing:border-box;color:var(--text-1);font-family:var(--font-ui);font-size:var(--body-size);line-height:var(--body-lh)}
.sf *{box-sizing:border-box}
.sf p,.sf ul{margin:0;padding:0;list-style:none}
.sf a{color:inherit;text-decoration:none}
.sf-wrap{max-width:var(--w-content);margin:0 auto;padding:0 var(--pad-desktop);display:flex;flex-direction:column;gap:var(--s-48)}
.sf-raster{display:flex;gap:var(--s-48);align-items:flex-start}
.sf-li{flex:5 1 0;min-width:0;display:flex;flex-direction:column;gap:var(--s-32)}
.sf-re{flex:7 1 0;min-width:0}
.sf-wm{font-family:var(--font-mark);font-size:var(--title-l-size);letter-spacing:-.01em;color:var(--text-1)}
.sf-wm span{display:block;line-height:.9}
.sf-wm span+span{font-style:italic;padding-left:var(--mark-hero-indent)}
.sf-claim{font-size:var(--body-s-size);color:var(--text-2);max-width:var(--voice-measure);text-wrap:pretty}
.sf-liste{display:flex;flex-direction:column;margin-top:calc(-1 * var(--s-12))}
.sf-liste li{display:flex;align-items:stretch;min-height:var(--hit-min);border-bottom:1px solid var(--volt-20);line-height:var(--list-lh)}
.sf-liste a{flex:1 1 auto;display:flex;justify-content:space-between;align-items:center;padding:var(--s-12) 0;gap:var(--s-16);color:var(--text-1);transition:color var(--dur-state) var(--ease-value)}
.sf-liste .pf{font-family:var(--font-data);color:var(--text-2);transition:transform var(--dur-move) var(--ease-move),color var(--dur-state) var(--ease-value)}
@media(hover:hover){.sf-liste a:hover .pf{color:var(--text-1);transform:translateX(var(--s-4))}}
.sf-liste a:active .pf{color:var(--text-1);transform:translateX(var(--s-4));transition:none}
.sf-kol{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;column-gap:var(--s-24);row-gap:var(--s-8);padding-top:var(--s-16);border-top:1px solid var(--volt-20);font-family:var(--font-data);font-size:var(--label-s-size);line-height:1.4;letter-spacing:var(--label-tracking);word-spacing:var(--mono-word);text-transform:uppercase;color:var(--text-2)}
.sf-kol a{position:relative;transition:color var(--dur-state) var(--ease-value)}
.sf-kol a::after{content:"";position:absolute;inset:calc(-1 * var(--s-12)) 0}
@media(hover:hover){.sf-kol a:hover{color:var(--text-1)}}
.sf-kol a span{margin-left:var(--s-4)}
.sf-kl{display:contents}
.sf-kl > span:first-child{order:1}
.sf-rl{order:2;display:flex;gap:var(--s-24)}
.sf-kl > span:last-child{order:3}
.sf-rl [aria-current]{color:var(--text-1)}
.sf[data-variante="klein"]{padding:0;min-height:var(--h-bar);display:flex;align-items:center;border-top:1px solid var(--volt-20)}
.sf[data-variante="klein"] .sf-wrap{flex:1}
.sf[data-variante="klein"] .sf-kol{border-top:0;padding-top:0}
@media(max-width:1000px){
  .sf-raster{flex-wrap:wrap;column-gap:var(--s-48);row-gap:var(--s-32)}
  .sf-li,.sf-re{flex:1 1 var(--w-cell)}
  .sf-kol{flex-wrap:nowrap;align-items:flex-start}
  .sf-kl,.sf-rl{display:flex;flex-direction:column;gap:var(--s-16)}
  .sf-rl{align-items:flex-end;text-align:right}
  .sf-kol a::after{inset:calc(-1 * var(--s-8)) 0}
  .sf[data-variante="klein"]{padding:var(--s-16) 0}
}
@media(max-width:810px){
  .sf-wrap{padding:0 var(--pad-tablet);gap:var(--s-32)}
  .sf[data-variante="klein"]{min-height:var(--h-bar-mobile)}
}
@media(max-width:480px){.sf-wrap{padding:0 var(--pad-mobile)}}