:root {
  --rot:            #B7142C;
  --rot-tief:       #8F1022; 
  --rot-schleier:   #F9EAEC; 
  --rot-rand:       #E4A6AF; 
  --rot-hell:       #E24053;

  --schwarz:        #12100F;
  --anthrazit:      #26221F;
  --schiefer:       #3A3633;
  --schiefer-hell:  #57514C;

  --off-white:      #F7F3EC; 
  --papier:         #FFFDF9; 
  --papier-warm:    #F0E7DA; 
  --kante:          #E2D8C9; 
  --kante-stark:    #C9BAA6; 
  --kante-dunkel:   #3A3633; 

  --koernung: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23k)' opacity='.055'/%3E%3C/svg%3E");

  --eiche:          #B8894F; 
  --eiche-hell:     #D9B98A; 
  --eiche-text:     #8A6230;

  --gruen:          #2F6A3B;
  --gruen-hell:     #86B77A;

  --text:           #1A1715;
  --text-leise:     #6B615A;
  --text-invers:    #F7F3EC;
  --text-invers-leise: rgba(247, 243, 236, .68);

  --fokus:          #0B63CE;

  --schrift-display: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  --schrift-text:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --tx-hero:    clamp(3rem, 1.2rem + 7vw, 7.5rem);
  --tx-h1:      clamp(2.5rem, 1.2rem + 5vw, 5.5rem);
  --tx-h2:      clamp(2rem, 1.2rem + 3.4vw, 4rem);
  --tx-h3:      clamp(1.3rem, 1.1rem + .9vw, 1.8rem);
  --tx-lead:    clamp(1.125rem, 1.05rem + .4vw, 1.375rem);
  --tx-body:    1.0625rem;
  --tx-klein:   .9375rem;
  --tx-mini:    .8125rem;
  --tx-eyebrow: .78rem;
  --tx-zahl:    clamp(2.5rem, 1.4rem + 4.6vw, 4.5rem);
  --tx-zitat:   clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);

  --zh-eng:     1.05; 
  --zh-mittel:  1.35;
  --zh-text:    1.7; 

  --sp-eyebrow: .16em; 
  --sp-weit:    .04em;

  --gw-display: 600;
  --gw-display-leicht: 400;

  --r-1:  4px;   --r-2:  8px;   --r-3: 12px;  --r-4: 16px;
  --r-5: 24px;   --r-6: 32px;   --r-7: 48px;  --r-8: 64px;
  --r-9: 96px;   --r-10:128px;  --r-11:160px;

  --sektion:      clamp(3.75rem, 2.25rem + 4.2vw, 6.5rem);
  --sektion-eng:  clamp(2.5rem, 1.75rem + 2.4vw, 4rem);

  --aktionsleiste: 4.15rem;

  --kopf-hoehe: 4.75rem;

  --breite:        1280px;
  --breite-eng:    880px;
  --breite-text:   68ch; 
  --rand:          clamp(1rem, .5rem + 2vw, 1.5rem);

  --radius-knopf: 2px;
  --radius-card:  6px;
  --radius-bild:  0px; 

  --schatten-1: 0 1px 2px rgba(41, 30, 24, .05);
  --schatten-2: 0 4px 16px rgba(41, 30, 24, .07);
  --schatten-3: 0 16px 48px rgba(41, 30, 24, .12);

  --zeit-schnell: 140ms;
  --zeit:         260ms;
  --zeit-ruhig:   520ms;
  --kurve:        cubic-bezier(.22, .61, .36, 1);
  --kurve-weich:  cubic-bezier(.4, 0, .2, 1);

  --z-basis: 1;
  --z-sticky: 50;
  --z-header: 100;
  --z-overlay: 200;
  --z-dialog: 300;
}

@media (max-height: 740px) { :root { --kopf-hoehe: 4rem; } }
@media (max-height: 640px) { :root { --kopf-hoehe: 3.75rem; } }

.auf-dunkel {
  --text:        var(--text-invers);
  --text-leise:  var(--text-invers-leise);
  --papier:      var(--anthrazit);
  --off-white:   var(--schwarz);
  --kante:       var(--kante-dunkel);
  --fokus:       #7FB4FF;
  color: var(--text);
}