/* Entwurf 1 „Gringo Gazette“ – Tombstone Rock Festival
   Zeitungsaufbau wie das Papier-Original, Farben nach Auftrag 01.11.2026:
   Grau statt Pergament, Weiss statt Tinte, Orange statt Blutrot.
   Schriftzug bleibt gebrochen, alles andere laeuft auf Oswald. */

@font-face{font-family:"Oswald";src:url("gemeinsam/fonts/oswald-variable.woff2") format("woff2");font-weight:200 700;font-display:swap}
@font-face{font-family:"Pirata One";src:url("gemeinsam/fonts/pirata-one-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}

:root{
  /* Flaechen: Grau */
  --papier:#2a2a2e;
  --papier-2:#333338;
  --papier-3:#9b9ba2;
  /* Schrift: Weiss */
  --tinte:#ffffff;
  --tinte-2:#d9d9dd;
  --tinte-3:#a8a8af;
  /* Akzent: Orange */
  --blut:#ff7a18;
  --blut-2:#ff9240;
  --blut-hell:#ffb469;
  --knochen:#ffffff;
  --augen:var(--flaeche);
  /* Tiefe Flaechen - im Original war das die Tinte, die ist jetzt weiss */
  --flaeche:#1b1b1f;
  --flaeche-2:#232327;
  --flaeche-3:#2e2e33;

  --f-bruch:"Oswald","Arial Narrow",sans-serif;
  --f-plakat:"Oswald","Arial Narrow",sans-serif;
  --f-marke:"Pirata One",serif;
  --f-text:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-label:"Oswald","Arial Narrow",sans-serif;

  --rahmen:1240px;
  --rand:clamp(16px,4vw,40px);
  --sek:clamp(38px,3.6vw,60px);
  --kopf-h:68px;
  --ease:cubic-bezier(.2,.7,.2,1);

  /* Papierkorn als SVG-Rauschen */
  --korn:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  /* grobe Fasern fuer Stempel und Druckkanten */
  --abrieb:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='a'><feTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -1.5 1.62'/></filter><rect width='100%' height='100%' filter='url(%23a)'/></svg>");
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  color:var(--tinte);
  font-family:var(--f-text);
  font-size:18px;line-height:1.62;
  background-color:var(--papier);
  background-image:
    var(--korn),
    radial-gradient(ellipse 55% 40% at 4% 8%,rgba(255,122,24,.09),transparent 70%),
    radial-gradient(ellipse 40% 30% at 96% 34%,rgba(255,122,24,.06),transparent 70%),
    radial-gradient(ellipse 50% 35% at 10% 78%,rgba(255,122,24,.05),transparent 70%),
    radial-gradient(ellipse 45% 30% at 92% 96%,rgba(255,122,24,.08),transparent 70%),
    linear-gradient(180deg,#313136 0%,#26262b 55%,#1e1e22 100%);
  background-size:260px 260px,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%;
  overflow-x:hidden;
}
/* gealterte Raender */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:90;
  box-shadow:inset 0 0 clamp(70px,10vw,180px) rgba(0,0,0,.55);
}
img,video,svg{display:block;max-width:100%}
img,video{height:auto}
a{color:var(--blut)}
a:hover{color:var(--tinte)}
:focus-visible{outline:3px solid var(--blut);outline-offset:3px}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
h1,h2,h3{margin:0;font-weight:400;line-height:1.08}

.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sprung{position:absolute;left:12px;top:-60px;z-index:200;background:var(--blut);color:var(--flaeche);padding:10px 16px;font-family:var(--f-label)}
.sprung:focus{top:12px}

.rahmen{width:100%;max-width:var(--rahmen);margin-inline:auto;padding-inline:var(--rand)}
.sektion{padding-block:var(--sek)}

/* Labels in Schreibmaschine */
.label{
  font-family:var(--f-label);
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blut);margin:0 0 .7em;
}
.label--hell{color:var(--papier-3)}

/* Blackletter-Sektionskopf */
.bruch{
  font-family:var(--f-bruch);font-weight:700;
  font-size:clamp(46px,6.4vw,88px);
  line-height:.98;letter-spacing:0;
  color:var(--tinte);
  text-wrap:balance;
}

/* Zeitungslinien: dick und duenn */
.linie-doppelt{
  border:0;height:7px;margin:22px 0;
  border-top:3px solid var(--tinte);
  border-bottom:1px solid var(--tinte);
}
.linie-doppelt--hell{border-color:var(--papier-3)}

/* Knoepfe */
.knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.knoepfe--mitte{justify-content:center;margin-top:clamp(28px,3vw,40px)}
.knopf{
  --lift:0px;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:12px 24px;
  font-family:var(--f-plakat);font-size:17px;letter-spacing:.04em;line-height:1;
  color:var(--tinte);text-decoration:none;white-space:nowrap;
  background:transparent;
  border:2px solid var(--tinte);
  box-shadow:3px 3px 0 var(--tinte);
  transform:translate(var(--lift),var(--lift));
  transition:transform .18s var(--ease),box-shadow .18s var(--ease);
}
.knopf:hover{--lift:-2px;box-shadow:5px 5px 0 var(--tinte);color:var(--tinte)}
.knopf:active{--lift:2px;box-shadow:1px 1px 0 var(--tinte)}
.knopf--voll{background:var(--blut);border-color:var(--blut);color:var(--flaeche)}
.knopf--voll:hover{color:var(--papier)}
.knopf--rot{background:var(--blut-2);border-color:var(--knochen);color:var(--knochen);box-shadow:3px 3px 0 var(--knochen)}
.knopf--rot:hover{color:var(--knochen);box-shadow:5px 5px 0 var(--knochen)}
.knopf--hell{border-color:var(--knochen);color:var(--knochen);box-shadow:3px 3px 0 var(--knochen)}
.knopf--hell:hover{color:var(--knochen);box-shadow:5px 5px 0 var(--knochen)}
.knopf--fb svg{width:24px;height:24px;flex:none;fill:currentColor}


/* --- Kopfleiste ---------------------------------------------------------- */
.kopf{
  position:fixed;inset:0 0 auto 0;z-index:100;
  height:var(--kopf-h);
  transition:background-color .3s ease,box-shadow .3s ease;
}
.kopf.is-scrolled{
  background-color:rgba(32,32,36,.94);backdrop-filter:blur(12px);
  box-shadow:0 1px 0 var(--tinte),0 4px 0 -1px var(--papier),0 5px 0 -1px var(--tinte),0 14px 24px -14px rgba(0,0,0,.6);
}
.kopf__innen{
  height:100%;max-width:var(--rahmen);margin-inline:auto;padding-inline:var(--rand);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.kopf__marke{
  font-family:var(--f-marke);font-weight:400;font-size:28px;line-height:1;
  color:var(--tinte);text-decoration:none;
  opacity:0;transform:translateY(-6px);
  transition:opacity .3s ease,transform .3s var(--ease);
}
.kopf.is-scrolled .kopf__marke{opacity:1;transform:none}
.kopf__liste{display:flex;gap:clamp(14px,2.4vw,34px);list-style:none;margin:0;padding:0}
.kopf__liste a{
  display:block;padding:12px 2px;
  font-family:var(--f-plakat);font-size:17px;letter-spacing:.06em;
  color:var(--tinte);text-decoration:none;
  background:linear-gradient(var(--blut),var(--blut)) left calc(100% - 6px)/0 2px no-repeat;
  transition:background-size .25s var(--ease),color .2s;
}
.kopf__liste a:hover,.kopf__liste a[aria-current="page"]{color:var(--blut);background-size:100% 2px}
.kopf__burger{
  display:none;
  min-width:44px;min-height:44px;padding:10px 14px;
  align-items:center;gap:10px;
  font-family:var(--f-label);font-size:14px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinte);background:var(--papier);border:2px solid var(--tinte);cursor:pointer;
}
.kopf__burger-striche,.kopf__burger-striche::before,.kopf__burger-striche::after{
  display:block;width:18px;height:2px;background:currentColor;position:relative;
  transition:transform .25s var(--ease),opacity .2s;
}
.kopf__burger-striche::before,.kopf__burger-striche::after{content:"";position:absolute;left:0}
.kopf__burger-striche::before{top:-6px}
.kopf__burger-striche::after{top:6px}
.kopf__burger[aria-expanded="true"] .kopf__burger-striche{background:transparent}
.kopf__burger[aria-expanded="true"] .kopf__burger-striche::before{transform:translateY(6px) rotate(45deg)}
.kopf__burger[aria-expanded="true"] .kopf__burger-striche::after{transform:translateY(-6px) rotate(-45deg)}

@media (max-width:820px){
  .kopf__marke{opacity:1;transform:none;font-size:24px}
  .kopf__burger{display:inline-flex}
  .kopf__nav{
    position:fixed;left:0;right:0;top:var(--kopf-h);bottom:0;
    background-color:var(--papier);background-image:var(--korn);
    border-top:3px double var(--tinte);
    padding:22px var(--rand) 40px;
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .25s ease,transform .25s var(--ease),visibility 0s linear .25s;
    overflow-y:auto;
  }
  .kopf__nav.ist-offen{opacity:1;visibility:visible;transform:none;transition:opacity .25s ease,transform .25s var(--ease)}
  .kopf__liste{flex-direction:column;gap:0}
  .kopf__liste li{border-bottom:1px solid rgba(255,255,255,.16)}
  .kopf__liste a{padding:16px 0;font-size:26px;background:none}
  .kopf.menue-offen{background-color:var(--papier)}
}
body.gesperrt{overflow:hidden}

/* --- Titelseite ---------------------------------------------------------- */
.titel{
  padding-top:calc(var(--kopf-h) + clamp(10px,2vw,24px));
  padding-bottom:var(--sek);
  /* nur seitlich kappen (Stempel); nach unten darf der Geier samt Schatten
     und Schein ueber den Rand ragen, sonst entsteht beim Scrollen eine Kante */
  overflow-x:clip;overflow-y:visible;
}
.titel__leiste{
  display:flex;justify-content:space-between;gap:16px;
  margin:0;padding:10px 0;
  font-family:var(--f-label);font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  border-top:3px solid var(--tinte);border-bottom:1px solid var(--tinte);
}
.titel__marke{
  text-align:center;
  padding:clamp(6px,1.4vw,16px) 0 0;
}
.titel__tomb{
  display:block;
  font-family:var(--f-marke);font-weight:400;
  font-size:clamp(52px,12.6vw,176px);
  line-height:.92;letter-spacing:-.005em;
  color:var(--tinte);
}
.titel__fest{
  display:flex;align-items:center;gap:clamp(12px,2vw,26px);
  margin-top:clamp(4px,.8vw,10px);
  font-family:var(--f-plakat);font-size:clamp(18px,2.4vw,32px);letter-spacing:.42em;
  text-transform:uppercase;color:var(--blut);
}
.titel__fest::before,.titel__fest::after{content:"";flex:1;height:7px;border-top:3px solid var(--tinte);border-bottom:1px solid var(--tinte)}
.titel__fest span{padding-left:.42em}

.titel__raster{
  display:grid;gap:clamp(18px,3vw,40px);
  grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,1fr);
  align-items:center;
  margin-top:clamp(12px,2vw,24px);
}
.titel__claim{
  font-family:var(--f-text);font-style:italic;
  font-size:clamp(24px,2.5vw,34px);line-height:1.18;
  text-wrap:balance;margin:0;
}
.titel__claim::first-letter{color:var(--blut)}
.titel__unter{font-size:17px;color:var(--tinte-2);margin-bottom:22px}

.titel__geier{position:relative;margin:0;aspect-ratio:755/808;max-height:min(68svh,640px);justify-self:center;width:100%}
.titel__geier-bild{position:absolute;inset:0;will-change:transform}
.titel__geier-bild img{width:100%;height:100%;object-fit:contain}

.titel__rechts{text-align:right}
.titel__datum{
  display:flex;flex-direction:column;align-items:flex-end;margin:0;
  font-family:var(--f-plakat);font-size:clamp(40px,4.4vw,64px);line-height:1;color:var(--tinte);
}
.titel__jahr{color:var(--blut);font-size:.82em;margin-top:.12em;letter-spacing:.06em}
.titel__ort{font-size:17px;line-height:1.5;margin:0}
.titel__ort strong{font-family:var(--f-plakat);font-weight:400;font-size:22px;letter-spacing:.04em}

/* Stempel */
.stempel{
  position:absolute;
  width:clamp(118px,11vw,150px);aspect-ratio:1;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--blut-2);
  border:4px solid currentColor;
  box-shadow:inset 0 0 0 5px var(--papier),inset 0 0 0 7px currentColor;
  transform:rotate(-14deg);
  -webkit-mask-image:var(--abrieb);mask-image:var(--abrieb);
  -webkit-mask-size:200px 200px;mask-size:200px 200px;
  mix-blend-mode:multiply;
}
.stempel__gross{font-family:var(--f-plakat);font-size:clamp(36px,3.6vw,48px);line-height:.9}
.stempel__klein{font-family:var(--f-label);font-size:clamp(12px,1.1vw,14px);letter-spacing:.22em;text-transform:uppercase;margin-top:4px}
.stempel--titel{right:-13%;top:0}

@media (max-width:980px){
  .titel__raster{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .titel__geier{grid-column:1/-1;grid-row:1;max-height:none;width:min(100%,420px)}
}
@media (max-width:640px){
  .titel__leiste{flex-wrap:wrap;justify-content:center;column-gap:18px;row-gap:2px;font-size:12px}
  .titel__leiste-mitte{order:3;width:100%;text-align:center}
  .titel__raster{grid-template-columns:minmax(0,1fr)}
  .titel__geier{width:min(100%,340px)}
  .titel__links,.titel__rechts{text-align:center}
  .titel__datum{flex-direction:row;justify-content:center;flex-wrap:wrap;gap:0 .3em;font-size:clamp(34px,10vw,44px)}
  .titel__jahr{width:100%;margin-top:.1em}
  .titel__links .knoepfe{justify-content:center}
  .titel__fest{letter-spacing:.3em}
  .stempel--titel{right:-4px;top:4%}
}

/* --- Artikel: Rock your spirit -------------------------------------------- */
.trenner{display:flex;align-items:center;gap:18px;margin-bottom:clamp(26px,3vw,40px)}
.trenner__linie{flex:1;height:7px;border-top:3px solid var(--tinte);border-bottom:1px solid var(--tinte)}
.artikel__raster{
  display:grid;gap:clamp(22px,3vw,44px);
  grid-template-columns:minmax(0,.8fr) minmax(0,2.3fr) minmax(0,.9fr);
  align-items:start;
}
.artikel__kopf .bruch{font-size:clamp(46px,5.4vw,76px)}
.artikel__text{column-count:2;column-gap:40px;column-rule:1px solid rgba(255,255,255,.2);hyphens:auto;-webkit-hyphens:auto}
.artikel__text p{break-inside:avoid-column}
.artikel__text strong{font-weight:400;font-family:var(--f-plakat);font-size:.92em;letter-spacing:.02em}
.initial::first-letter{
  float:left;
  font-family:var(--f-bruch);font-weight:700;
  font-size:4.6em;line-height:.8;
  padding:.06em .08em 0 0;
  color:var(--blut);
}
.artikel__zitat{
  margin:0;padding:20px 0 0;
  border-top:3px solid var(--tinte);
  font-family:var(--f-plakat);font-size:clamp(24px,2.4vw,32px);line-height:1.12;
  color:var(--blut);
}
.artikel__zitat p{margin-bottom:14px;text-wrap:balance}
.artikel__zitat footer{font-family:var(--f-text);font-style:italic;font-size:19px;color:var(--tinte)}
@media (max-width:980px){
  .artikel__raster{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .artikel__text{grid-column:1/-1;grid-row:2}
  .artikel__zitat{grid-column:2;grid-row:1;align-self:end}
}
@media (max-width:640px){
  .artikel__raster{grid-template-columns:minmax(0,1fr)}
  .artikel__text{column-count:1}
  .artikel__zitat{grid-column:auto;grid-row:auto}
}

/* --- Aushang ------------------------------------------------------------- */
.aushang__raster{
  display:grid;gap:clamp(24px,4vw,56px);
  grid-template-columns:minmax(0,1.1fr) minmax(0,.75fr) minmax(0,.9fr);
  align-items:center;
}
.aushang figure{margin:0}
.aushang__plakat{position:relative;transform:rotate(-1.4deg)}
.aushang__plakat img{width:100%;border:8px solid var(--papier-2);box-shadow:0 0 0 1px rgba(255,255,255,.14),0 22px 40px -18px rgba(0,0,0,.8)}
.aushang__plakat .label{margin-top:16px;text-align:center}
.klebe{position:absolute;top:-14px;width:96px;height:30px;background:rgba(255,255,255,.13);box-shadow:0 1px 2px rgba(0,0,0,.35);z-index:1}
.klebe--l{left:6%;transform:rotate(-6deg)}
.klebe--r{right:6%;transform:rotate(5deg)}
.aushang__video{justify-self:center;width:min(100%,250px)}
.aushang__video-rahmen{padding:8px;background:var(--flaeche-2);box-shadow:6px 6px 0 var(--blut)}
.aushang__video-rahmen video{width:100%;aspect-ratio:9/16;object-fit:cover;background:var(--flaeche-2)}
.aushang__video .label{margin-top:16px;text-align:center}
.aushang__text{font-size:20px;line-height:1.4;margin-bottom:20px}
@media (max-width:980px){
  .aushang__raster{grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr)}
  .aushang__folge{grid-column:1/-1;text-align:center}
  .aushang__folge .knopf{margin-inline:auto}
}
@media (max-width:640px){
  .aushang__raster{grid-template-columns:minmax(0,1fr)}
  .aushang__video{width:min(72%,240px)}
}

/* --- Line-up: dunkler Steckbrief ----------------------------------------- */
.lineup{
  position:relative;overflow:clip;
  background-color:var(--flaeche);
  background-image:var(--korn),radial-gradient(ellipse 70% 80% at 50% 40%,#2b2b31,#1b1b1f 75%);
  background-size:260px 260px,100% 100%;
  color:var(--knochen);
  padding-block:clamp(56px,6vw,96px);
}
.lineup__geier{
  position:absolute;width:min(48vw,620px);height:auto;
  right:-6%;top:50%;transform:translateY(-50%);
  opacity:.16;pointer-events:none;
}
.lineup__geier--links{left:-6%;right:auto}
.lineup__innen{position:relative}
.lineup__plakat{
  max-width:720px;margin-inline:auto;text-align:center;
  padding:clamp(28px,4vw,48px) clamp(20px,4vw,48px);
  border:3px solid var(--knochen);
  box-shadow:inset 0 0 0 6px var(--flaeche),inset 0 0 0 7px var(--knochen);
  background:rgba(20,20,24,.72);
}
.lineup__titel{
  font-family:var(--f-bruch);font-weight:700;
  font-size:clamp(52px,8.4vw,112px);line-height:.95;color:var(--knochen);
}
.lineup__soon{
  margin:10px 0 0;
  font-family:var(--f-plakat);font-size:clamp(26px,3.4vw,44px);letter-spacing:.14em;text-transform:uppercase;
  color:var(--blut-hell);
}
.lineup__text{font-size:19px;color:#c2c2c8;max-width:520px;margin-inline:auto}

/* --- News --------------------------------------------------------------- */
.sektionskopf{text-align:center;max-width:760px;margin:0 auto clamp(22px,2.4vw,34px)}
.sektionskopf__text{font-style:italic;font-size:19px;color:var(--tinte-2);margin-top:12px}
.news__raster{
  display:grid;gap:clamp(22px,3vw,40px) clamp(20px,2.6vw,36px);
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.meldung{border-top:3px solid var(--tinte);padding-top:14px;display:flex;flex-direction:column}
.meldung__bild{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--flaeche-2);margin-bottom:14px}
.meldung__bild img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease);
}
.meldung__bild--logo{display:flex;align-items:center;justify-content:center;padding:18px}
.meldung__bild--logo img{height:auto;object-fit:contain}
.meldung:hover .meldung__bild img{transform:scale(1.04)}
.meldung__datum{font-family:var(--f-label);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--blut);margin:0 0 6px}
.meldung__titel{font-family:var(--f-plakat);font-size:clamp(20px,1.8vw,24px);line-height:1.16;margin-bottom:12px;text-wrap:balance}
.meldung__titel a{color:var(--tinte);text-decoration:none}
.meldung__titel a:hover{color:var(--blut)}
.meldung__mehr{margin-top:auto;font-family:var(--f-label);font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--tinte);padding:10px 0;align-self:flex-start}
.meldung__mehr:hover{color:var(--blut)}
@media (max-width:980px){.news__raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.news__raster{grid-template-columns:minmax(0,1fr)}}

/* --- Anzeigen ----------------------------------------------------------- */
.anzeigen__raster{display:grid;gap:clamp(20px,3vw,36px);grid-template-columns:repeat(2,minmax(0,1fr))}
.anzeige{
  position:relative;
  padding:clamp(22px,3vw,34px);
  border:2px solid var(--tinte);
  box-shadow:inset 0 0 0 5px var(--papier),inset 0 0 0 6px var(--tinte);
  background:rgba(255,255,255,.05);
}
.anzeige__titel{
  font-family:var(--f-plakat);font-size:clamp(30px,3.2vw,42px);line-height:1;
  margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--tinte);
}
.anzeige__preis{font-family:var(--f-plakat);font-size:24px;color:var(--blut)}
.anzeige__preis span{font-family:var(--f-label);font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--tinte);margin-right:6px}
.anzeige__hinweis{font-style:italic;color:var(--tinte-2)}
.anzeige__adresse{font-family:var(--f-label);font-size:15px;letter-spacing:.06em;margin-top:16px;padding-top:14px;border-top:1px dashed var(--tinte)}
@media (max-width:700px){.anzeigen__raster{grid-template-columns:minmax(0,1fr)}}

/* --- Live Dates --------------------------------------------------------- */
.live__karte{
  position:relative;
  display:grid;gap:clamp(22px,3vw,40px);
  grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);
  align-items:center;
  padding:clamp(24px,3.4vw,44px);
  background:var(--flaeche-2);color:var(--knochen);
  box-shadow:8px 8px 0 var(--blut);
}
.live__karte .label{color:var(--blut-hell)}
.live__karte .bruch{color:var(--knochen)}
.live__ort{font-family:var(--f-label);font-size:15px;letter-spacing:.06em;margin:14px 0 4px;color:#c2c2c8}
.live__datum{font-family:var(--f-plakat);font-size:clamp(22px,2.2vw,28px);color:var(--knochen)}
.live__uhr{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1.2vw,16px);
}
.live__uhr li{
  display:flex;flex-direction:column;align-items:center;
  padding:clamp(14px,2vw,22px) 6px;
  border:2px dashed rgba(255,255,255,.34);
  background:rgba(255,255,255,.04);
}
.live__zahl{font-family:var(--f-plakat);font-size:clamp(25px,7vw,60px);line-height:1;color:var(--knochen);font-variant-numeric:tabular-nums}
.live__einheit{font-family:var(--f-label);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--blut-hell);margin-top:8px}
.stempel--live{
  right:clamp(-14px,-1vw,-6px);top:clamp(-40px,-3vw,-22px);
  color:var(--blut-hell);
  box-shadow:inset 0 0 0 5px var(--tinte),inset 0 0 0 7px currentColor;
  mix-blend-mode:normal;
  width:clamp(96px,9vw,124px);
}
.stempel--live .stempel__gross{font-size:clamp(30px,3vw,40px)}
@media (max-width:860px){
  .live__karte{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:420px){
  .live__uhr{gap:6px}
  .live__uhr li{padding:12px 2px}
  .live__einheit{font-size:11px;letter-spacing:.12em}
}

/* --- Fuss -------------------------------------------------------------- */
.fuss{
  background-color:var(--flaeche);background-image:var(--korn);background-size:260px 260px;
  color:#c2c2c8;
  padding-top:clamp(38px,3.8vw,56px);
  border-top:6px double var(--blut-2);
}
.fuss__innen{
  display:grid;gap:clamp(24px,3vw,40px);
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1.2fr);
  align-items:center;
}
.fuss__titel{font-family:var(--f-marke);font-weight:400;font-size:clamp(40px,4vw,56px);line-height:1;color:var(--knochen);margin:0}
.fuss__datum{font-family:var(--f-label);font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--blut-hell);margin-top:10px}
.fuss__verein{text-align:center}
.fuss__verein img{width:150px;margin:0 auto 10px;border:3px solid var(--knochen)}
.fuss__verein p{font-size:15px;margin:0}
.fuss__nav{display:flex;flex-direction:column;align-items:flex-end;gap:16px}
.fuss__nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:flex-end}
.fuss__nav a{color:#c2c2c8;font-family:var(--f-label);font-size:14px;letter-spacing:.08em;display:inline-block;padding:10px 0}
.fuss__nav a:hover{color:var(--blut-hell)}
.fuss__fb{display:flex!important;align-items:center;justify-content:center;width:46px;height:46px;padding:0!important;border:2px solid var(--knochen)}
.fuss__fb svg{width:22px;height:22px;fill:var(--knochen)}
.fuss__fb:hover{background:var(--blut-2)}
.fuss__copy{font-size:14px;color:#8b8b92;padding-block:clamp(22px,3vw,34px);margin:clamp(24px,3vw,36px) auto 0;border-top:1px solid rgba(255,255,255,.14)}
@media (max-width:860px){
  .fuss__innen{grid-template-columns:minmax(0,1fr);text-align:center}
  .fuss__nav{align-items:center}
  .fuss__nav ul{justify-content:center}
}

/* --- Unterseite Meet the Band (01.11.2026) ------------------------------ */
.unterseite .kopf__marke{opacity:1;transform:none}
.seitenkopf{padding-top:calc(var(--kopf-h) + clamp(10px,2vw,24px));padding-bottom:var(--sek)}
.seitenkopf__titel{text-align:center;padding-top:clamp(10px,2vw,22px)}
.seitenkopf__gross{
  display:block;font-family:var(--f-marke);font-weight:400;
  font-size:clamp(54px,11vw,150px);line-height:.92;color:var(--tinte);
}
.programm{
  max-width:980px;margin:clamp(26px,3.4vw,46px) auto 0;
  padding:clamp(22px,3.4vw,44px);
  border:2px solid var(--tinte);
  box-shadow:inset 0 0 0 5px var(--papier),inset 0 0 0 6px var(--tinte);
  background:rgba(255,255,255,.05);
}
.programm__kopf{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;margin-bottom:clamp(18px,2.4vw,30px)}
.programm__intro{font-style:italic;font-size:19px;color:var(--tinte-2);max-width:520px;margin:0}
.programm__raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,4vw,56px)}
.programm__spalte+.programm__spalte{border-left:1px solid rgba(255,255,255,.2);padding-left:clamp(22px,4vw,56px)}
.programm__tag{
  font-family:var(--f-label);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--tinte-2);
  margin:0 0 10px;padding-bottom:10px;border-bottom:3px solid var(--tinte);
}
.programm__tag span{font-family:var(--f-bruch);font-weight:700;font-size:34px;letter-spacing:0;text-transform:none;color:var(--blut);margin-right:8px}
.programm__liste{list-style:none;margin:0;padding:0}
.programm__liste li{border-bottom:1px dashed rgba(255,255,255,.22)}
.programm__liste a{
  display:block;padding:10px 0;
  font-family:var(--f-plakat);font-size:clamp(20px,2vw,26px);line-height:1.15;
  color:var(--tinte);text-decoration:none;transition:color .2s,padding-left .25s var(--ease);
}
.programm__liste a:hover{color:var(--blut);padding-left:8px}
@media (max-width:640px){
  .programm__raster{grid-template-columns:minmax(0,1fr)}
  .programm__spalte+.programm__spalte{border-left:0;padding-left:0}
}

/* Tagesbanner: dunkler Steckbrief wie Line-up auf der Startseite */
.tag__banner{
  background-color:var(--flaeche);
  background-image:var(--korn),radial-gradient(ellipse 70% 90% at 50% 40%,#2b2b31,#1b1b1f 75%);
  background-size:260px 260px,100% 100%;
  color:var(--knochen);text-align:center;
  padding-block:clamp(36px,4.6vw,64px);
  border-block:6px double var(--blut-2);
  scroll-margin-top:var(--kopf-h);
}
.tag__titel{font-family:var(--f-bruch);font-weight:700;font-size:clamp(60px,9vw,124px);line-height:.95;color:var(--knochen)}
.tag__datum{margin:8px 0 0;font-family:var(--f-plakat);font-size:clamp(22px,2.6vw,34px);letter-spacing:.14em;color:var(--blut-hell)}
.tag__bands{padding-block:var(--sek)}

/* Steckbrief je Band: angepinntes Foto, Text in Zeitungsspalten */
.band{
  display:grid;gap:clamp(24px,4vw,60px);
  grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  align-items:start;
  padding-block:clamp(30px,4vw,56px);
  scroll-margin-top:calc(var(--kopf-h) + 12px);
}
.band+.band{border-top:3px solid var(--tinte);box-shadow:inset 0 4px 0 -3px var(--papier),inset 0 5px 0 -3px var(--tinte)}
.band--gespiegelt .band__foto{order:2}
.band__foto{position:relative;margin:0;transform:rotate(-1.2deg);position:sticky;top:calc(var(--kopf-h) + 24px)}
.band--gespiegelt .band__foto{transform:rotate(1.2deg)}
.band__foto img{
  width:100%;border:8px solid var(--papier-2);
  box-shadow:0 0 0 1px rgba(255,255,255,.14),0 22px 40px -18px rgba(0,0,0,.8);
}
.band__name{font-family:var(--f-plakat);font-size:clamp(34px,4vw,58px);line-height:1;color:var(--tinte);text-wrap:balance}
.band__links{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:18px 0 0;padding:0}
.band__links a{
  display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  color:var(--tinte);border:2px solid var(--tinte);box-shadow:2px 2px 0 var(--tinte);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background-color .18s,color .18s;
}
.band__links a:hover{background:var(--blut-2);border-color:var(--blut-2);color:var(--knochen);transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--tinte)}
.band__links svg{width:20px;height:20px;fill:currentColor}
.band__bio{hyphens:auto;-webkit-hyphens:auto}
.band__bio--lang{column-count:2;column-gap:36px;column-rule:1px solid rgba(255,255,255,.2)}
.band__bio p{break-inside:avoid-column}
@media (max-width:1080px){.band__bio--lang{column-count:1}}
@media (max-width:820px){
  .band{grid-template-columns:minmax(0,1fr)}
  .band--gespiegelt .band__foto{order:0}
  .band__foto{position:relative;top:auto;max-width:560px}
}

/* Schluss: Plakat und Tickets */
.schluss__raster{display:grid;gap:clamp(28px,5vw,70px);grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center}
.schluss__plakat{max-width:440px;justify-self:center}
.schluss__karte{grid-template-columns:minmax(0,1fr)}
.schluss__text{font-size:19px;color:#c2c2c8;margin:14px 0 24px}
@media (max-width:820px){.schluss__raster{grid-template-columns:minmax(0,1fr)}}

/* Startseite: Plakat hochkant, Line-up-Namen im Steckbrief */
.aushang__plakat--hoch{max-width:400px;justify-self:center}
.lineup__namen{
  list-style:none;margin:18px auto 0;padding:0;max-width:600px;
  display:flex;flex-wrap:wrap;justify-content:center;gap:4px 0;
  font-family:var(--f-plakat);font-size:clamp(19px,2vw,24px);line-height:1.3;color:var(--knochen);
}
.lineup__namen li:not(:last-child)::after{content:"✦";color:var(--blut-hell);font-size:.6em;margin-inline:.6em;vertical-align:.25em}
.lineup__tag{font-family:var(--f-label);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--blut-hell);margin:22px 0 0}

/* --- Bewegung ---------------------------------------------------------- */
.lade{opacity:0;transform:translateY(22px);animation:lade 1s var(--ease) forwards}
.lade-1{animation-delay:.05s}
.lade-2{animation-delay:.15s}
.lade-3{animation-delay:.45s}
.lade-4{animation-delay:.6s}
@keyframes lade{to{opacity:1;transform:none}}

.titel__geier-bild img{opacity:0;animation:tinte 1.6s .25s var(--ease) forwards}
@keyframes tinte{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}

.stempel--titel{opacity:0;animation:stempel .5s 1.1s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes stempel{
  0%{opacity:0;transform:rotate(-14deg) scale(1.9)}
  70%{opacity:1;transform:rotate(-14deg) scale(.94)}
  100%{opacity:1;transform:rotate(-14deg) scale(1)}
}

.js .reveal{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal{opacity:1;transform:none}
.js .reveal.in{opacity:1;transform:none}
.reveal.in{opacity:1;transform:none}
.reveal-d1{transition-delay:.08s}
.reveal-d2{transition-delay:.16s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .lade,.reveal,.titel__geier-bild img,.stempel--titel{opacity:1!important;transform:none!important}
  .stempel--titel{transform:rotate(-14deg)!important}
  .titel__geier-bild{will-change:auto}
}

/* Meet the Band: gespiegelte Steckbriefe behalten die Spaltenbreiten, Hochformate nicht ueber die Bildschirmhoehe */
.band--gespiegelt{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.band__foto{justify-self:center}
.band__foto img{width:auto;max-height:min(78vh,680px)}
@media (max-width:820px){.band--gespiegelt{grid-template-columns:minmax(0,1fr)}}

/* ===========================================================================
   Anpassungen zum Auftrag vom 01.11.2026
   Der Aufbau bleibt; hier wird nachgezogen, was auf Pergament stimmte,
   auf Grau aber nicht: Strichbilder, Stempel, und die Laufweiten von Oswald.
   =========================================================================== */

/* Der Geier ist eine schwarze Strichzeichnung auf Weiss: umkehren. */
/* Der Titelgeier ist jetzt ein freigestelltes Farbbild - keine Umkehrung.
   Das Wasserzeichen im Line-up bleibt die Strichzeichnung. */
.lineup__geier{filter:invert(1) grayscale(1) contrast(1.05)}
.titel__geier-bild img{filter:drop-shadow(0 28px 34px rgba(0,0,0,.55))}
.titel__geier::before{
  content:"";position:absolute;inset:-8% -12%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,122,24,.22),transparent 72%);
}
/* Stempel: multiply verschwindet auf Grau */
.stempel{mix-blend-mode:normal;color:var(--blut)}

/* Oswald braucht Gewicht und Sperrung, wo vorher Rye und Schreibmaschine standen */
.label{font-weight:500;letter-spacing:.24em;font-size:12px;text-transform:uppercase}
.knopf{font-weight:600;font-size:15px;letter-spacing:.14em;text-transform:uppercase}
.bruch{font-weight:600;letter-spacing:.012em;text-transform:uppercase;line-height:1.04;font-size:clamp(38px,5.2vw,74px)}
.titel__datum,.titel__ort strong,.meldung__titel,.band__name,.anzeige__titel,
.live__datum,.live__zahl,.programm__tag span,.tag__titel,.lineup__titel,
.seitenkopf__gross,.fuss__titel{font-weight:600}
.band__name,.tag__titel,.lineup__titel{text-transform:uppercase;letter-spacing:.012em}
.titel__fest{font-weight:500}
/* Der Schriftzug bleibt gebrochen - Pirata One traegt schmaler als geplant */
.titel__tomb{letter-spacing:.005em}

/* Fliesstext ist jetzt serifenlos: etwas ruhiger setzen */
body{font-size:17px;line-height:1.65}
.titel__claim{font-style:normal;font-family:var(--f-plakat);font-weight:300;letter-spacing:.01em}
.artikel__zitat p{font-style:normal}
.programm__intro,.sektionskopf__text{font-style:normal}

/* Vereinslogo im Fuss ist dunkel auf hell */
.fuss__verein img{filter:invert(1) grayscale(1);opacity:.8}

/* ===========================================================================
   Bausteine fuer die neuen Unterseiten - gleiche Machart:
   harte Kanten, Haarlinien, Versalien-Labels, keine Rundungen.
   =========================================================================== */

/* Galerie (Archiv, Impressionen) */
.galerie{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.galerie a{display:block;overflow:hidden;background:var(--flaeche-2);aspect-ratio:4/3;border:1px solid rgba(255,255,255,.16)}
.galerie img{width:100%;height:100%;object-fit:cover;filter:contrast(1.03);transition:transform .5s var(--ease)}
.galerie a:hover img{transform:scale(1.06);filter:none}

/* Jahreskacheln */
.jahre{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:clamp(12px,1.8vw,22px)}
.jahr{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:8px;
  min-height:190px;padding:clamp(18px,2.2vw,28px);text-decoration:none;
  background:var(--flaeche-2);border:2px solid var(--tinte);box-shadow:3px 3px 0 var(--tinte);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease);
}
.jahr:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--blut)}
.jahr .label{margin:0}
.jahr__zahl{font-family:var(--f-plakat);font-weight:600;font-size:clamp(44px,5.4vw,76px);line-height:.95;color:var(--knochen)}
.jahr:hover .jahr__zahl{color:var(--blut-hell)}

/* Partnerlogos: teils helle, teils dunkle Vorlagen - helle Kachel zeigt beide */
.partner__logos{list-style:none;margin:clamp(26px,3.4vw,46px) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:clamp(12px,1.8vw,22px)}
.partner__logos li{background:var(--knochen);border:2px solid var(--tinte);padding:16px;display:flex;align-items:center;justify-content:center;min-height:130px}
.partner__logos img{max-height:92px;width:auto;object-fit:contain;filter:grayscale(1);mix-blend-mode:multiply}
.anzeigen__raster--drei{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.anzeigen__raster--drei{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.anzeigen__raster--drei{grid-template-columns:minmax(0,1fr)}}

/* Zwei-Klick-Einbettung (Eventim, YouTube) */
.einbettung{border:2px solid var(--tinte);background:var(--flaeche-2);padding:clamp(22px,2.8vw,36px);max-width:900px;box-shadow:4px 4px 0 var(--tinte)}
.einbettung .bruch{font-size:clamp(26px,3.2vw,44px)}
.einbettung p{color:#c2c2c8}
.einbettung--geladen{padding:0;max-width:none;background:#fff;box-shadow:none}
.einbettung iframe{width:100%;min-height:760px;border:0;background:#fff;display:block}

/* Fliesstext auf Unterseiten */
.text{max-width:760px}
.text .bruch{font-size:clamp(30px,4.2vw,58px);margin-bottom:.1em}
.text h2{font-family:var(--f-plakat);font-weight:600;font-size:clamp(21px,2.3vw,29px);text-transform:uppercase;letter-spacing:.03em;margin:clamp(26px,3vw,42px) 0 12px;color:var(--tinte)}
.text h3{font-family:var(--f-plakat);font-weight:600;font-size:clamp(17px,1.9vw,22px);text-transform:uppercase;margin:clamp(20px,2.2vw,30px) 0 10px;color:var(--tinte)}
.text h2:first-child,.text h3:first-child{margin-top:0}
.text img,.text video{margin:clamp(18px,2.4vw,30px) 0;width:100%;border:1px solid rgba(255,255,255,.2)}
.text blockquote{margin:clamp(18px,2.4vw,30px) 0;padding:16px 22px;border-left:4px solid var(--blut);background:var(--flaeche-2);color:var(--knochen)}
.text ul{padding-left:1.2em}
.blaettern{display:flex;flex-wrap:wrap;gap:12px 26px;margin-top:clamp(28px,3.4vw,48px);padding-top:20px;border-top:3px solid var(--tinte)}
.blaettern a{font-family:var(--f-label);font-weight:500;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--tinte-2);text-decoration:none}
.blaettern a:hover{color:var(--blut)}

/* Bewerbungsformular */
.formular{max-width:820px}
.feldreihe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
@media (max-width:700px){.feldreihe{grid-template-columns:minmax(0,1fr)}}
.feld{margin-bottom:clamp(14px,2vw,22px)}
.feld label{display:block;margin-bottom:7px;font-family:var(--f-label);font-weight:500;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--tinte-2)}
.feld input,.feld textarea{
  width:100%;padding:13px 14px;font:inherit;color:var(--tinte);
  background:var(--flaeche-2);border:2px solid var(--tinte);border-radius:0;
}
.feld textarea{min-height:150px;resize:vertical}
.feld input:focus-visible,.feld textarea:focus-visible{outline:none;border-color:var(--blut);box-shadow:3px 3px 0 var(--blut)}
.hinweis{font-size:14px;color:var(--tinte-3);margin:7px 0 0}
.haken{display:flex;gap:12px;align-items:flex-start;margin:clamp(16px,2vw,24px) 0}
.haken input{width:20px;height:20px;flex:none;margin-top:3px;accent-color:var(--blut)}
.haken label{font-size:15px;color:var(--tinte-2)}
/* Falle fuer Bots: fuer Menschen unsichtbar, aber nicht display:none */
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.status{display:none;margin:0 0 20px;padding:14px 18px;border:2px solid var(--tinte);font-family:var(--f-label);letter-spacing:.06em}
.status.is-visible{display:block}
.status--ok{border-color:var(--blut);color:var(--blut-hell);background:var(--flaeche-2)}
.status--fehler{border-color:#ff6b6b;color:#ffb0b0;background:var(--flaeche-2)}
.formularnote{font-size:14px;color:var(--tinte-3);margin-top:18px}

/* Bandkacheln im Line-up: die Fotos als Kontaktbogen unter den Namen.
   Fehlten bisher - die Bilder standen deshalb ungestaltet untereinander. */
.kacheln{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1.1vw,14px);
  margin:clamp(26px,3.2vw,44px) 0 0;
}
.kachel{
  position:relative;display:block;text-decoration:none;overflow:hidden;
  aspect-ratio:4/5;background:var(--flaeche-3);border:1px solid rgba(255,255,255,.22);
}
.kachel__bild{position:absolute;inset:0;display:block}
.kachel__bild img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.kachel:hover .kachel__bild img{transform:scale(1.05)}
.kachel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(12,12,14,.92))}
.kachel__name,.kachel__tag{position:absolute;left:12px;right:12px;z-index:1;display:block;text-align:left}
.kachel__name{
  bottom:26px;font-family:var(--f-plakat);font-weight:600;
  font-size:clamp(13px,1.25vw,17px);line-height:1.1;text-transform:uppercase;color:var(--knochen);
}
.kachel__tag{
  bottom:10px;font-family:var(--f-label);font-weight:500;font-size:10px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--blut-hell);
}
@media (max-width:980px){.kacheln{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:620px){.kacheln{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Weitere Bandfotos unter dem Hauptfoto eines Steckbriefs */
.band__weitere{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px;margin-top:8px}
.band__weitere a{display:block;overflow:hidden;aspect-ratio:4/3;border:1px solid rgba(255,255,255,.22)}
.band__weitere img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.band__weitere a:hover img{transform:scale(1.06)}

/* Social-Kanaele: Facebook, Instagram, TikTok */
.sozial{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.sozial a{
  display:flex;align-items:center;gap:12px;
  padding:11px 14px;text-decoration:none;
  border:2px solid var(--tinte);color:var(--tinte);
  font-family:var(--f-label);font-weight:500;font-size:14px;letter-spacing:.14em;text-transform:uppercase;
  box-shadow:3px 3px 0 var(--tinte);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease);
}
.sozial a:hover{
  transform:translate(-2px,-2px);background:var(--blut);border-color:var(--blut);
  color:var(--flaeche);box-shadow:5px 5px 0 var(--knochen);
}
.sozial__zeichen{display:flex;flex:none}
.sozial svg{width:22px;height:22px;fill:currentColor}

/* im Fuss nur die Zeichen, nebeneinander */
.fuss__sozial{list-style:none;margin:0;padding:0;display:flex;gap:10px}
.fuss__sozial a{
  display:flex;align-items:center;justify-content:center;width:46px;height:46px;
  border:2px solid var(--knochen);color:var(--knochen);
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.fuss__sozial svg{width:21px;height:21px;fill:currentColor}
.fuss__sozial a:hover{background:var(--blut);border-color:var(--blut);color:var(--flaeche)}