/* ==========================================================================
   [VEREINSNAME] e.V. — Basis-Stylesheet
   Farbwelt: Flagge Bosnien-Herzegowina (Kobalt / Gold) + Cilim-Ornamentik
   ========================================================================== */

/* --- Schriften (selbst gehostet, kein Google-CDN — DSGVO) ---------------- */
@font-face{
  font-family:'Bricolage Grotesque';
  src:url('fonts/bricolage-grotesque-latin.woff2') format('woff2');
  font-weight:600 800; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Bricolage Grotesque';
  src:url('fonts/bricolage-grotesque-latin-ext.woff2') format('woff2');
  font-weight:600 800; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Inter';
  src:url('fonts/inter-latin.woff2') format('woff2');
  font-weight:400 700; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';
  src:url('fonts/inter-latin-ext.woff2') format('woff2');
  font-weight:400 700; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* --- Tokens -------------------------------------------------------------- */
:root{
  /* Farben */
  --kobalt:#0B2C5E;         /* Vereinsblau */
  --kobalt-tief:#041A3D;    /* tiefster Grund */
  --kobalt-hell:#1B4D8F;    /* Blau der Briefbogen-Schwuenge */
  --zlato:#D9A441;          /* Gold, lesbar auf Blau */
  --zlato-tief:#BE7B12;     /* Logo-Gold, fuer Flaechen */
  --vuna:#F7F3EA;           /* Creme der Briefbogen */
  --vuna-tief:#E6DFD0;

  /* Nationalflagge Bosnien und Herzegowina — amtliche Farben */
  --flagge-blau:#002395;
  --flagge-gold:#FECB00;
  --tinta:#14131A;          /* Tinte */
  --cigla:#B5462F;          /* Ziegelrot, Cilim-Weberei — fuer helle Flaechen */
  --cigla-hell:#E8836B;     /* aufgehellt — fuer Text/Rahmen auf Dunkelblau */

  /* Sparten-Farben */
  --sp-fussball:var(--zlato);
  --sp-folklore:var(--cigla-hell);
  --sp-sprache:var(--vuna);

  /* Typo */
  --display:'Bricolage Grotesque',system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  --fs-mega:clamp(2.6rem,6.6vw,5.2rem);
  --fs-h1:clamp(2.25rem,5.2vw,4rem);
  --fs-h2:clamp(2rem,4.3vw,3.4rem);
  --fs-h3:clamp(1.25rem,2.1vw,1.6rem);
  --fs-body:clamp(1rem,1.05vw,1.125rem);
  --fs-lead:clamp(1.08rem,1.5vw,1.3rem);
  --fs-small:.875rem;
  --fs-kicker:.78rem;

  /* Raum */
  --wrap:1200px;
  --gut:clamp(1.25rem,4vw,2.5rem);
  --band-y:clamp(4.5rem,9vw,7.5rem);
  --r:14px;
  --r-lg:22px;

  /* Flaggen-Diagonale: Steigung 1:2 */
  --slope:26.57deg;

  --ease:cubic-bezier(.22,.9,.28,1);
  --ease-out:cubic-bezier(.23,1,.32,1);      /* Rueckmeldung auf Klick und Hover */
  --ease-expo:cubic-bezier(.16,1,.3,1);      /* Auftritte */
  --ease-in-out:cubic-bezier(.77,0,.175,1);  /* Bewegung auf der Flaeche */
  --schatten:0 18px 50px -22px rgba(6,23,68,.55);
  --schatten-gold:0 14px 40px -18px rgba(245,197,24,.5);
}

/* --- Reset --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5.5rem}
body{
  margin:0; background:var(--kobalt-tief); color:var(--vuna);
  font:400 var(--fs-body)/1.65 var(--body);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;line-height:1.04;letter-spacing:-.025em;margin:0}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--zlato);outline-offset:3px;border-radius:4px}
::selection{background:var(--zlato);color:var(--tinta)}

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--zlato);color:var(--tinta);padding:.7rem 1.1rem;font-weight:700;border-radius:0 0 var(--r) 0}
.skip:focus{left:0}

/* --- Layout-Bänder ------------------------------------------------------- */
.wrap{width:min(calc(100% - var(--gut)*2),var(--wrap));margin-inline:auto}
.band{position:relative;padding-block:var(--band-y)}
.band--blau{background-color:var(--kobalt-tief);color:var(--vuna)}
.band--blau-hell{background-color:var(--kobalt);color:var(--vuna)}
.band--creme{background-color:var(--vuna);color:var(--tinta)}
.band--creme h1,.band--creme h2,.band--creme h3{color:var(--tinta)}

/* Lilien-Textur aus dem Vereinslogo */
.band--textur::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.06;
  background-image:url('img/lilie.png');
  background-size:76px auto;
  inset:-152px 0 0 -76px;
  animation:lilien-treiben 90s linear infinite;
}
.band--textur{overflow:hidden}
.band--creme.band--textur::before{opacity:.055;filter:brightness(0) saturate(100%) invert(13%) sepia(38%) saturate(2200%) hue-rotate(198deg)}
@keyframes lilien-treiben{to{transform:translate(76px,152px)}}

/* Grosse Lilie als ruhiges Wasserzeichen, wie auf dem Briefbogen */
.band--wappen{position:relative;overflow:hidden}
.band--wappen::after{
  content:'';position:absolute;pointer-events:none;
  left:-7%;top:50%;translate:0 -50%;
  width:min(46vw,520px);aspect-ratio:304/400;
  background:url('img/lilie.png') center/contain no-repeat;
  opacity:.05;
}
.band--creme.band--wappen::after{opacity:.07;filter:brightness(0) saturate(100%) invert(13%) sepia(38%) saturate(2200%) hue-rotate(198deg)}

/* --- Kicker: kurzer Gold-Strich im Flaggenwinkel -------------------------- */
.kicker{
  display:inline-flex;align-items:center;gap:.7rem;
  font:600 var(--fs-kicker)/1 var(--body);
  text-transform:uppercase;letter-spacing:.2em;color:var(--zlato);
  margin-bottom:1.1rem;
}
.kicker::before{
  content:'';width:26px;height:3px;background:currentColor;
  transform:rotate(calc(var(--slope) * -1));transform-origin:center;
  border-radius:2px;flex:none;
}
.band--creme .kicker{color:var(--kobalt)}
.kicker--gross{font-size:clamp(.86rem,1.45vw,1.12rem);letter-spacing:.17em;gap:.9rem;margin-bottom:1.3rem}
.kicker--gross::before{width:34px;height:3px}

.band-head{max-width:62ch;margin-bottom:clamp(2.25rem,4.5vw,3.5rem)}
.band-head h2{font-size:var(--fs-h2);margin-bottom:1rem}
.band-head p{font-size:var(--fs-lead);opacity:.82;max-width:56ch}
.band--creme .band-head p{opacity:.72}

/* --- Buttons ------------------------------------------------------------- */
.btn{
  --btn-bg:var(--zlato); --btn-fg:var(--tinta);
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.95rem 1.7rem;border:0;border-radius:999px;cursor:pointer;
  background:var(--btn-bg);color:var(--btn-fg);
  font:700 1rem/1 var(--body);letter-spacing:-.01em;text-decoration:none;
  transition:transform .22s var(--ease-out),box-shadow .3s var(--ease-out),background-color .2s ease,color .2s ease;
  position:relative;isolation:isolate;overflow:hidden;
}
.btn:active{transform:scale(.97);transition-duration:.12s}
.btn--geist{--btn-bg:transparent;--btn-fg:currentColor;box-shadow:inset 0 0 0 2px currentColor}
/* Lichtstreif ueber die goldenen Buttons, einmal pro Darueberfahren */
.btn:not(.btn--geist)::after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.5) 50%,transparent 68%);
  transform:translateX(-130%);
}
@media (hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(-2px);box-shadow:var(--schatten-gold)}
  .btn:hover:active{transform:translateY(-1px) scale(.97)}
  .btn:not(.btn--geist):hover::after{transform:translateX(130%);transition:transform .8s var(--ease-out)}
  .btn--geist:hover{--btn-bg:rgba(246,241,231,.08);box-shadow:inset 0 0 0 2px currentColor,0 14px 34px -20px rgba(0,0,0,.6)}
}
.band--creme .btn--geist{--btn-fg:var(--kobalt)}
.btn--blau{--btn-bg:var(--kobalt);--btn-fg:var(--vuna)}
.btn--gross{padding:1.15rem 2.1rem;font-size:1.06rem}
.btn svg{width:1.1em;height:1.1em;flex:none}

/* --- Kopfzeile ----------------------------------------------------------- */
.kopf{
  position:sticky;top:0;z-index:60;
  background:rgba(6,23,68,.78);backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid rgba(245,197,24,.16);
  transition:background .3s,border-color .3s;
}
.kopf-in{display:flex;align-items:center;gap:1.5rem;min-height:4.6rem}
.marke{display:flex;align-items:center;gap:.8rem;text-decoration:none;flex:none;margin-right:auto}
.marke-logo{
  width:52px;height:52px;flex:none;border-radius:50%;
  object-fit:contain;background:#fff;
  box-shadow:0 2px 10px -2px rgba(4,26,61,.45);
  transition:transform .5s var(--ease);
}
.marke:hover .marke-logo{transform:rotate(-8deg) scale(1.06)}
.kopf-in .marke-logo{width:46px;height:46px}
.marke-txt{display:flex;flex-direction:column;line-height:1.15}
.marke-name{font:800 1.04rem/1.1 var(--display);letter-spacing:-.03em;color:var(--vuna)}
.band--creme .marke-name{color:var(--tinta)}
.marke-sub{font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;color:var(--zlato);opacity:.9}

.nav{display:flex;align-items:center;gap:.15rem}
.nav a{
  position:relative;padding:.55rem .85rem;border-radius:999px;text-decoration:none;
  font-size:.925rem;font-weight:500;color:rgba(246,241,231,.76);
  transition:color .2s,background .2s;
}
.nav a:hover{color:var(--vuna);background:rgba(246,241,231,.07)}
.nav a[aria-current="true"],.nav a.ist-aktiv{color:var(--zlato)}
.nav a[aria-current="true"]::after,.nav a.ist-aktiv::after{
  content:'';position:absolute;left:50%;bottom:.15rem;translate:-50% 0;
  width:18px;height:3px;border-radius:2px;background:var(--zlato);
  transform:rotate(calc(var(--slope) * -1));
}
.kopf .btn{padding:.72rem 1.25rem;font-size:.92rem;min-height:44px}

.burger{display:none;width:44px;height:44px;border:0;background:transparent;cursor:pointer;padding:0;place-items:center}
.burger span{display:block;width:22px;height:2px;background:var(--vuna);border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
.burger span+span{margin-top:5px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:1200px){
  .burger{display:grid}
  .kopf .btn{display:none}
  .nav{
    position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    max-height:calc(100svh - 100%);overflow-y:auto;
    background:var(--kobalt-tief);border-bottom:1px solid rgba(245,197,24,.2);
    padding:1rem var(--gut) 1.6rem;gap:.2rem;
    clip-path:inset(0 0 100% 0);transition:clip-path .38s var(--ease);
  }
  .nav.ist-offen{clip-path:inset(0 0 0 0)}
  .nav a{padding:.95rem 1rem;font-size:1.05rem;min-height:44px;display:flex;align-items:center}
  .nav a[aria-current="true"]::after,.nav a.ist-aktiv::after{left:1rem;translate:0 0;bottom:.5rem}
  .nav .btn{display:inline-flex;margin-top:.8rem;justify-content:center;padding:.95rem 1.5rem}
}

/* --- Reveal beim Scrollen ------------------------------------------------ */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease-expo),transform .9s var(--ease-expo)}
.reveal.ist-sichtbar{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.09s}
.reveal[data-delay="2"]{transition-delay:.18s}
.reveal[data-delay="3"]{transition-delay:.27s}
.reveal[data-delay="4"]{transition-delay:.36s}

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

/* ==========================================================================
   HERO — Sterne auf der Flaggen-Diagonale
   ========================================================================== */
.hero{
  position:relative;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(120% 90% at 18% 105%,rgba(22,64,143,.85),transparent 62%),
    linear-gradient(165deg,var(--kobalt-tief) 0%,var(--kobalt) 58%,var(--kobalt-tief) 100%);
  padding-block:clamp(4.5rem,11vh,8rem) clamp(4rem,9vh,6.5rem);
  min-height:min(92svh,860px);display:flex;align-items:center;
}

/* --- Flaggenmotiv: Golddreieck und die Sternendiagonale ---------------- */
.hero-dreieck{
  position:absolute;top:0;right:0;width:min(62%,780px);aspect-ratio:1/1;
  background:linear-gradient(200deg,var(--zlato),var(--zlato-tief));
  clip-path:polygon(100% 0,100% 100%,0 0);
  opacity:.22;z-index:-2;transform-origin:top right;
  animation:dreieck-ein 1.25s var(--ease-expo) .05s both;
  will-change:transform;
}
/* Das Dreieck faltet sich aus der Ecke auf, wie eine Fahne, die ausgerollt wird */
@keyframes dreieck-ein{
  from{opacity:0;clip-path:polygon(100% 0,100% 0,100% 0)}
  to{opacity:.22;clip-path:polygon(100% 0,100% 100%,0 0)}
}

.hero-sterne{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero-sterne svg{width:100%;height:100%}
.hero-sterne .stern{
  fill:var(--vuna);opacity:0;transform-box:fill-box;transform-origin:center;
  animation:stern-ein .8s var(--ease-expo) both;
}
/* Die Sterne setzen sich einer nach dem anderen auf die Diagonale */
@keyframes stern-ein{
  0%{opacity:0;transform:translateY(-18px) scale(.55) rotate(-45deg);filter:blur(3px)}
  100%{opacity:.92;transform:none;filter:none}
}
.hero-sterne .linie{
  stroke:var(--zlato);stroke-width:1.5;opacity:.45;fill:none;
  stroke-dasharray:1400;stroke-dashoffset:1400;
  animation:linie-ziehen 1.5s var(--ease-in-out) .1s forwards;
}
@keyframes linie-ziehen{to{stroke-dashoffset:0;opacity:.45}}
@media (prefers-reduced-motion:reduce){
  .hero-dreieck{opacity:.22;animation:none}
  .hero-sterne .stern{opacity:.92;animation:none}
  .hero-sterne .linie{stroke-dashoffset:0;animation:none}
}
.hero-sterne{will-change:transform}
/* Auf schmalen Handys laeuft die Sternenlinie sonst quer durch den Text.
   Verschoben liegt sie wie auf der Flagge an der Kante des Dreiecks. */
@media (max-width:600px){
  .hero-sterne{transform:translate(14vw,-18vw)}
  .hero-sterne .stern{scale:.8}
}
@media (max-width:360px){
  .hero-sterne{transform:translate(14vw,-24vw)}
  .hero-sterne .stern{scale:.75}
}

.hero-in{position:relative;max-width:min(64ch,780px)}
.hero h1{font-size:var(--fs-mega);margin-bottom:1.25rem;text-wrap:balance}
/* Der Vereinsname steht mit in der Hauptueberschrift (Suchmaschinen), sieht aber aus wie vorher */
.hero h1 .kicker{display:flex;width:fit-content;text-wrap:wrap}
.hero h1 .zeile{display:block}
.hero-slogan-sub{
  font:600 clamp(.95rem,1.5vw,1.12rem)/1.5 var(--body);
  color:var(--zlato);margin-bottom:1rem;letter-spacing:.01em;
}
.hero h1 em{font-style:normal;color:var(--zlato);position:relative;white-space:nowrap}
.hero h1 em::after{
  content:'';position:absolute;left:0;right:0;bottom:.06em;height:.1em;
  background:var(--zlato);opacity:.5;border-radius:2px;
  transform:scaleX(0);transform-origin:left;
  animation:unterstrich 1s var(--ease) 1.1s forwards;
}
@keyframes unterstrich{to{transform:scaleX(1)}}
.hero-drei{
  display:flex;flex-wrap:wrap;gap:.1rem .9rem;margin-bottom:.95rem;
  font:800 clamp(1.3rem,2.7vw,2rem)/1.25 var(--display);letter-spacing:-.025em;
}
.hero-drei span{position:relative;white-space:nowrap}
.hero-drei span::after{
  content:'';position:absolute;left:0;right:0;bottom:-.14em;height:3px;border-radius:2px;
  background:currentColor;opacity:.38;transform:scaleX(0);transform-origin:left;
  animation:unterstrich .7s var(--ease) both;
}
.hero-drei span:nth-child(1){color:var(--zlato)}
.hero-drei span:nth-child(1)::after{animation-delay:1.25s}
.hero-drei span:nth-child(2){color:var(--cigla-hell)}
.hero-drei span:nth-child(2)::after{animation-delay:1.45s}
.hero-drei span:nth-child(3){color:var(--vuna)}
.hero-drei span:nth-child(3)::after{animation-delay:1.65s}
.hero-lead{font-size:var(--fs-lead);opacity:.84;max-width:52ch;margin-bottom:2.2rem}
.hero-akt{display:flex;flex-wrap:wrap;gap:.9rem;margin-bottom:2.6rem}
/* Aufblend-Sequenz beim Laden */
.hero-in>*{opacity:0;animation:hoch .8s var(--ease) both}
.hero-in>*:nth-child(1){animation-delay:.22s}
.hero-in>*:nth-child(2){animation-delay:.34s}
.hero-in>*:nth-child(3){animation-delay:.46s}
.hero-in>*:nth-child(4){animation-delay:.58s}
.hero-in>*:nth-child(5){animation-delay:.70s}
@keyframes hoch{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* ==========================================================================
   ZAHLEN
   ========================================================================== */
.zahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;background:rgba(10,42,107,.16);border-radius:var(--r-lg);overflow:hidden}
.zahl{background:var(--vuna);padding:1.9rem 1.5rem;text-align:left}
.zahl b{display:block;font:800 clamp(2.1rem,4vw,3.1rem)/1 var(--display);color:var(--kobalt);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.zahl span{display:block;margin-top:.45rem;font-size:.86rem;font-weight:500;color:rgba(20,19,26,.62)}

.ueber-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media (max-width:860px){.ueber-grid{grid-template-columns:1fr}}
.ueber-grid--schmal{grid-template-columns:.78fr 1.22fr}
@media (max-width:860px){.ueber-grid--schmal{grid-template-columns:1fr}}
.ueber-titel{font-size:var(--fs-h2)}
.ueber-titel::after{
  content:'';display:block;width:72px;height:4px;border-radius:2px;margin-top:1.2rem;
  background:linear-gradient(90deg,var(--kobalt),var(--zlato-tief));
  transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease) .2s;
}
.reveal.ist-sichtbar .ueber-titel::after{transform:scaleX(1)}
.ueber-marke{
  display:flex;align-items:center;gap:.85rem;margin-top:1.7rem;
  font:700 1rem/1.25 var(--display);color:var(--kobalt);letter-spacing:-.02em;
}
.ueber-marke img{width:56px;height:56px;flex:none}
@media (max-width:860px){.ueber-marke{margin-top:1.2rem}}
.ueber-text p+p{margin-top:1.05rem}
.ueber-text{font-size:1.06rem;color:rgba(20,19,26,.78)}
.ueber-text strong{color:var(--tinta);font-weight:600}

/* ==========================================================================
   SPARTEN — Karten mit Eckschnitt im Flaggenwinkel
   ========================================================================== */
.sparten{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
@media (max-width:1040px){.sparten{grid-template-columns:repeat(2,1fr)}}
@media (max-width:660px){.sparten{grid-template-columns:1fr}}
.sparte{
  --akzent:var(--zlato);
  position:relative;overflow:hidden;border-radius:var(--r-lg);isolation:isolate;
  background:linear-gradient(170deg,rgba(246,241,231,.075),rgba(246,241,231,.03));
  border:1px solid rgba(246,241,231,.12);
  display:flex;flex-direction:column;
  transition:transform .45s var(--ease),border-color .35s,background .35s;
}
.sparte:hover{transform:translateY(-7px);border-color:color-mix(in srgb,var(--akzent) 55%,transparent)}
.sparte::before{ /* Eckschnitt oben rechts */
  content:'';position:absolute;top:0;right:0;width:96px;height:96px;z-index:2;
  background:var(--akzent);clip-path:polygon(100% 0,100% 100%,0 0);
  opacity:.9;transition:width .45s var(--ease),height .45s var(--ease);
}
.sparte:hover::before{width:128px;height:128px}
/* Die Zeichnungen des Vereins sitzen auf einer cremefarbenen Flaeche,
   das Weiss der Bilder geht per multiply darin auf */
.sparte-bild{
  position:relative;height:clamp(150px,15vw,188px);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:var(--vuna);border-bottom:2px solid var(--akzent);
}
.sparte-bild img{height:84%;width:auto;max-width:92%;object-fit:contain;mix-blend-mode:multiply;transition:transform .7s var(--ease)}
.sparte:hover .sparte-bild img{transform:scale(1.06) rotate(-1.5deg)}
.sparte-inhalt{padding:1.45rem 1.8rem 1.8rem}
.sparte h3{font-size:var(--fs-h3);margin-bottom:.35rem;overflow:hidden}
.sparte h3 .roll{display:inline-block;transition:transform .5s var(--ease)}
.sparte:hover h3 .roll{transform:translateY(-100%)}
.sparte h3 .roll::after{content:attr(data-roll);position:absolute;left:0;top:100%;color:var(--akzent)}
.sparte h3 .roll-wrap{position:relative;display:inline-block;overflow:hidden;vertical-align:bottom}
.sparte-bs{font-size:.84rem;letter-spacing:.14em;text-transform:uppercase;color:var(--akzent);font-weight:600;margin-bottom:.9rem}
.sparte p{font-size:.975rem;opacity:.8;margin-bottom:1.3rem}
.sparte p:last-child{margin-bottom:0}

/* ==========================================================================
   UNSERE WERTE — Karten mit Cilim-Band, die sich beim Darueberfahren oeffnen
   ========================================================================== */
.werte{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,1.8vw,1.4rem)}
.wertkarte{
  position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-lg);
  background:linear-gradient(158deg,var(--kobalt-hell) -25%,var(--kobalt) 45%,var(--kobalt-tief) 105%);
  color:var(--vuna);min-height:clamp(250px,25vw,330px);
  display:grid;place-items:center;text-align:center;
  padding:clamp(1.9rem,3.4vw,2.8rem) clamp(1.4rem,3vw,2.6rem);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.wertkarte:hover,.wertkarte:focus-within{transform:translateY(-6px);box-shadow:0 26px 60px rgba(4,26,61,.34)}
.wertkarte:focus-visible{outline:2px solid var(--zlato);outline-offset:3px}

/* Goldkante zieht sich beim Hereinscrollen auf */
.wertkarte::before{
  content:'';position:absolute;left:0;top:0;height:3px;width:100%;
  background:linear-gradient(90deg,var(--zlato),var(--cigla-hell) 55%,transparent);
  transform:scaleX(0);transform-origin:left;
  transition:transform 1s var(--ease) .25s;
}
.wertkarte.ist-sichtbar::before{transform:scaleX(1)}

/* Das gewebte Band aus dem Vereinsteppich, faehrt beim Scrollen auseinander */
.wk-band{
  position:absolute;left:-3%;right:-3%;top:50%;translate:0 -50%;z-index:-1;
  height:clamp(104px,15vw,150px);
  background:url('img/cilim-band.png') center/auto 100% repeat-x;
  /* In der Mitte laeuft das Muster aus, damit die Schrift frei steht,
     genau wie auf den Entwuerfen des Vereins. */
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 20%,transparent 35%,transparent 65%,#000 80%,#000 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 20%,transparent 35%,transparent 65%,#000 80%,#000 100%);
  opacity:0;transform:scaleX(.7);
  transition:opacity .9s var(--ease) .12s,transform 1.2s var(--ease) .12s;
}
.wertkarte.ist-sichtbar .wk-band{opacity:.92;transform:none}
.wertkarte:hover .wk-band,.wertkarte:focus-within .wk-band{opacity:.16;transition-delay:0s}


.wk-flaeche{position:relative;width:100%;display:grid;place-items:center}
.wertkarte .wk-titel{color:var(--vuna)}
.wk-titel{
  font-family:var(--display);font-weight:800;line-height:1.02;letter-spacing:-.03em;
  font-size:clamp(1.6rem,3.1vw,2.45rem);
  text-shadow:0 2px 24px rgba(4,26,61,.6);
  transition:opacity .4s var(--ease),transform .55s var(--ease);
}
.wk-titel span{display:block}
.wk-titel em{
  display:block;font-style:normal;font-weight:600;font-size:.5em;
  color:#9FC6E8;letter-spacing:.02em;margin:.1em 0;
}
.wk-text{
  position:absolute;inset:0;display:grid;align-content:center;
  font-size:clamp(.95rem,1.15vw,1.04rem);line-height:1.58;
  color:rgba(246,241,231,.93);max-width:44ch;margin-inline:auto;
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .45s var(--ease),transform .6s var(--ease);
}
.wertkarte:hover .wk-titel,.wertkarte:focus-within .wk-titel{opacity:0;transform:translateY(-14px) scale(.96)}
.wertkarte:hover .wk-text,.wertkarte:focus-within .wk-text{opacity:1;transform:none;pointer-events:auto}

@media (max-width:760px){.werte{grid-template-columns:1fr}}

/* ==========================================================================
   BEITRAGSRECHNER + MITGLIEDSAUSWEIS  (Signature-Element)
   ========================================================================== */
.rechner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.8rem,4vw,3.5rem);align-items:start}
@media (max-width:900px){.rechner{grid-template-columns:1fr}}

.rechner-steuer{display:flex;flex-direction:column;gap:1.6rem}
.feld-titel{font:600 .8rem/1 var(--body);text-transform:uppercase;letter-spacing:.17em;color:rgba(20,19,26,.5);margin-bottom:.85rem;display:block}

.umschalter{display:inline-grid;grid-auto-flow:column;gap:.3rem;padding:.3rem;border-radius:999px;background:rgba(10,42,107,.09);position:relative}
.umschalter input{position:absolute;opacity:0;width:0;height:0}
.umschalter label{
  padding:.7rem 1.5rem;border-radius:999px;cursor:pointer;font-weight:600;font-size:.95rem;
  color:rgba(20,19,26,.62);transition:color .25s,background .25s;text-align:center;
}
.umschalter input:checked+label{background:var(--kobalt);color:var(--vuna);box-shadow:0 6px 18px -8px rgba(10,42,107,.7)}
.umschalter input:focus-visible+label{outline:3px solid var(--zlato);outline-offset:2px}
@media (max-width:520px){
  .umschalter{display:grid;grid-auto-flow:row;width:100%;border-radius:20px}
  .umschalter label{border-radius:16px;padding:.72rem 1rem;min-height:44px}
  /* untereinander passt Name und Betrag in eine Zeile */
  .umschalter label br{display:none}
  .umschalter label small::before{content:' · '}
}
.feld-hinweis{font-size:.84rem;opacity:.68;margin:.8rem 0 0;max-width:56ch;line-height:1.45}
.tab-hinweis{display:block;font-size:.74rem;font-weight:500;opacity:.62;letter-spacing:0;text-transform:none;margin-top:.15rem}

.wahl{display:grid;gap:.7rem}
.wahl-zeile{position:relative}
.wahl-zeile input{position:absolute;opacity:0;width:0;height:0}
.wahl-zeile label{
  --akzent:var(--kobalt);
  display:flex;align-items:center;gap:1rem;cursor:pointer;
  padding:1.05rem 1.3rem;border-radius:var(--r);
  background:#fff;border:2px solid var(--vuna-tief);
  transition:border-color .25s,transform .25s var(--ease),box-shadow .25s;
}
.wahl-zeile label:hover{transform:translateX(4px)}
.wahl-zeile input:checked+label{border-color:var(--akzent);box-shadow:0 10px 26px -18px rgba(10,42,107,.85)}
.wahl-zeile input:focus-visible+label{outline:3px solid var(--zlato);outline-offset:2px}
.wahl-kasten{
  width:26px;height:26px;border-radius:8px;flex:none;display:grid;place-items:center;
  border:2px solid var(--vuna-tief);transition:background .25s,border-color .25s;
}
.wahl-zeile input:checked+label .wahl-kasten{background:var(--akzent);border-color:var(--akzent)}
.wahl-kasten svg{width:15px;height:15px;color:#fff;opacity:0;transform:scale(.4);transition:opacity .2s,transform .3s var(--ease)}
.wahl-zeile input:checked+label .wahl-kasten svg{opacity:1;transform:none}
.wahl-txt{flex:1;min-width:0}
.wahl-txt b{display:block;font-weight:600;color:var(--tinta);font-size:1.02rem}
.wahl-txt span{font-size:.85rem;color:rgba(20,19,26,.55)}
.wahl-plus{font-weight:700;color:var(--akzent);font-size:.95rem;white-space:nowrap;font-variant-numeric:tabular-nums}

/* Der Ausweis */
.ausweis{
  position:sticky;top:6.5rem;
  border-radius:var(--r-lg);overflow:hidden;color:var(--vuna);
  background:linear-gradient(158deg,var(--kobalt) 0%,var(--kobalt-tief) 72%);
  box-shadow:var(--schatten);
  transition:transform .5s var(--ease);
}
@media (max-width:900px){.ausweis{position:static}}
.ausweis::before{ /* Flaggendreieck auf der Karte */
  content:'';position:absolute;top:0;right:0;width:46%;aspect-ratio:1/1;
  background:var(--zlato);clip-path:polygon(100% 0,100% 100%,0 0);opacity:.16;
}
.ausweis-kopf{
  position:relative;display:flex;align-items:center;gap:.8rem;
  padding:1.4rem 1.6rem;border-bottom:1px dashed rgba(246,241,231,.24);
}
.ausweis-kopf .marke-logo{width:40px;height:40px}
.ausweis-kopf b{font:800 .95rem/1.2 var(--display);letter-spacing:-.02em}
.ausweis-kopf span{display:block;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--zlato);font-weight:600}
.ausweis-koerper{position:relative;padding:1.6rem}
.ausweis-art{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--zlato);font-weight:600;margin-bottom:.3rem}
.ausweis-name{font:800 1.5rem/1.1 var(--display);letter-spacing:-.03em;margin-bottom:1.3rem}
.ausweis-linie{height:1px;background:repeating-linear-gradient(90deg,rgba(246,241,231,.3) 0 6px,transparent 6px 12px);margin-bottom:1.3rem}

.stempel-feld{display:flex;flex-wrap:wrap;gap:.5rem;min-height:2.6rem;margin-bottom:1.5rem;align-content:flex-start}
.stempel{
  --akzent:var(--zlato);
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.45rem .9rem;border-radius:8px;font-size:.84rem;font-weight:700;
  color:var(--akzent);border:2px solid currentColor;
  transform:rotate(-3deg) scale(.7);opacity:0;
  transition:transform .42s var(--ease),opacity .3s;
}
.stempel.ist-da{transform:rotate(-3deg) scale(1);opacity:1}
.stempel:nth-child(even).ist-da{transform:rotate(2.5deg) scale(1)}
.stempel-leer{font-size:.85rem;opacity:.42;font-style:italic;align-self:center}

.ausweis-summe{
  display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;
  padding-top:1.2rem;border-top:1px dashed rgba(246,241,231,.24);
}
.ausweis-summe .lbl{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;opacity:.7;font-weight:600}
.ausweis-summe .wert{
  font:800 clamp(2.6rem,6vw,3.6rem)/1 var(--display);color:var(--zlato);
  letter-spacing:-.05em;font-variant-numeric:tabular-nums;
}
.ausweis-summe .wert small{font-size:.32em;font-weight:600;letter-spacing:0;opacity:.75;color:var(--vuna)}
.ausweis-fuss{padding:.9rem 1.6rem;background:rgba(6,23,68,.5);font-size:.78rem;opacity:.72;text-align:center}

/* Preistabelle */
.preis-tab{width:100%;border-collapse:collapse;margin-top:clamp(2.5rem,5vw,3.5rem);font-variant-numeric:tabular-nums}
.preis-tab caption{text-align:left;font-size:.86rem;color:rgba(20,19,26,.55);padding-bottom:.9rem}
.preis-tab th,.preis-tab td{padding:1rem 1.1rem;text-align:left;border-bottom:1px solid var(--vuna-tief)}
.preis-tab thead th{font:600 .78rem/1 var(--body);text-transform:uppercase;letter-spacing:.14em;color:rgba(20,19,26,.5);border-bottom-width:2px}
.preis-tab tbody th{font-weight:600;color:var(--tinta)}
.preis-tab td{color:rgba(20,19,26,.72)}
.preis-tab .betont{font-weight:700;color:var(--kobalt)}
@media (max-width:640px){
  .preis-tab thead{display:none}
  .preis-tab tr{display:block;border-bottom:2px solid var(--vuna-tief);padding:.6rem 0}
  .preis-tab th,.preis-tab td{display:flex;justify-content:space-between;gap:1rem;border:0;padding:.45rem 0}
  .preis-tab td::before{content:attr(data-lbl);font-weight:600;color:rgba(20,19,26,.5)}
}

/* Buchstaben-Roll: deutscher Name rollt hoch, bosnischer rollt nach */
.sparte h3{overflow:visible}
.roll-wrap{position:relative;display:inline-block;overflow:hidden;vertical-align:bottom;line-height:1.1}
.roll{display:block;transition:transform .5s var(--ease)}
.roll::after{content:attr(data-roll);position:absolute;left:0;top:100%;width:100%;color:var(--akzent);white-space:nowrap}
.sparte:hover .roll,.sparte:focus-within .roll{transform:translateY(-100%)}

/* ==========================================================================
   EVENTS / Teferic
   ========================================================================== */
.events{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:1.2rem}
.event{
  position:relative;border-radius:var(--r-lg);padding:1.7rem 1.5rem;
  background:rgba(246,241,231,.055);border:1px solid rgba(246,241,231,.12);
  display:flex;flex-direction:column;gap:.7rem;
  transition:transform .4s var(--ease),background .3s,border-color .3s;
}
.event:hover{transform:translateY(-6px);background:rgba(246,241,231,.09);border-color:rgba(245,197,24,.4)}
.event-zeit{
  display:inline-flex;align-items:center;gap:.5rem;align-self:flex-start;
  font-size:.76rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--zlato);
}
.event-zeit::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.event h3{font-size:1.22rem}
.event h3 .bs{display:block;font-size:.78rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:rgba(246,241,231,.5);margin-top:.3rem;font-family:var(--body)}
.event p{font-size:.95rem;opacity:.78}

/* ==========================================================================
   GALERIE — Aufklapp-Streifen
   ========================================================================== */
.galerie{display:flex;gap:.8rem;height:min(56vh,440px)}
.galerie-bild{
  position:relative;flex:1;min-width:0;border-radius:var(--r-lg);overflow:hidden;cursor:pointer;
  border:0;padding:0;background:var(--kobalt);
  transition:flex .6s var(--ease);
}
.galerie-bild[aria-expanded="true"]{flex:3.2}
.galerie-bild img{width:100%;height:100%;object-fit:cover;filter:saturate(.55) brightness(.75);transition:filter .6s var(--ease),transform .9s var(--ease)}
.galerie-bild[aria-expanded="true"] img{filter:none;transform:scale(1.03)}
.galerie-bild figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:1.4rem 1.3rem;text-align:left;
  background:linear-gradient(transparent,rgba(6,23,68,.92));color:var(--vuna);
  font:800 1.05rem/1.2 var(--display);letter-spacing:-.02em;
  opacity:0;transform:translateY(10px);transition:opacity .45s,transform .45s var(--ease);
}
.galerie-bild[aria-expanded="true"] figcaption{opacity:1;transform:none}
.galerie-bild figcaption span{display:block;font:500 .82rem/1.4 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--zlato);margin-top:.3rem}
@media (max-width:760px){
  .galerie{flex-direction:column;height:auto}
  .galerie-bild{height:180px;flex:none}
  .galerie-bild[aria-expanded="true"]{height:330px}
  .galerie-bild figcaption{opacity:1;transform:none}
}

/* ==========================================================================
   MITGLIED WERDEN — Schritte + PDF-Download
   ========================================================================== */
.schritte{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.3rem;margin-bottom:clamp(2.5rem,5vw,3.75rem);counter-reset:s}
.schritt{position:relative;padding-top:2.6rem;counter-increment:s}
.schritt::before{
  content:counter(s,decimal-leading-zero);position:absolute;top:0;left:0;
  font:800 .95rem/1 var(--display);color:var(--zlato);letter-spacing:.06em;
}
.schritt::after{
  content:'';position:absolute;top:.35rem;left:2.4rem;right:0;height:2px;
  background:linear-gradient(90deg,rgba(245,197,24,.45),transparent);
}
.schritt h3{font-size:1.15rem;margin-bottom:.5rem}
.schritt p{font-size:.96rem;opacity:.78}

.download{
  display:grid;grid-template-columns:auto 1fr auto;gap:1.5rem;align-items:center;
  padding:clamp(1.5rem,3.5vw,2.2rem);border-radius:var(--r-lg);
  background:linear-gradient(140deg,rgba(245,197,24,.16),rgba(246,241,231,.05));
  border:1px solid rgba(245,197,24,.4);
}
@media (max-width:760px){.download{grid-template-columns:1fr;text-align:left}}
.download-ikon{
  width:64px;height:64px;border-radius:16px;display:grid;place-items:center;flex:none;
  background:var(--zlato);color:var(--kobalt-tief);
}
.download-ikon svg{width:30px;height:30px}
.download h3{font-size:1.3rem;margin-bottom:.4rem}
.download p{font-size:.95rem;opacity:.8}
.download p b{color:var(--zlato);font-weight:600}

/* ==========================================================================
   FAQ — Reiter + Aufklapper
   ========================================================================== */
.reiter{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:2rem}
.reiter button{
  padding:.65rem 1.25rem;border-radius:999px;border:2px solid var(--vuna-tief);
  background:transparent;cursor:pointer;font-weight:600;font-size:.92rem;
  color:rgba(20,19,26,.6);transition:all .25s var(--ease);
}
.reiter button:hover{border-color:var(--kobalt);color:var(--kobalt)}
.reiter button[aria-selected="true"]{background:var(--kobalt);border-color:var(--kobalt);color:var(--vuna)}
.faq-gruppe[hidden]{display:none}
.faq-liste{border-top:1px solid var(--vuna-tief)}
.faq-pos{border-bottom:1px solid var(--vuna-tief)}
.faq-pos summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;
  padding:1.3rem 0;cursor:pointer;list-style:none;
  font:600 1.06rem/1.45 var(--body);color:var(--tinta);
}
.faq-pos summary::-webkit-details-marker{display:none}
.faq-pos summary::after{
  content:'';flex:none;width:14px;height:14px;margin-top:.45rem;
  border-right:2.5px solid var(--kobalt);border-bottom:2.5px solid var(--kobalt);
  transform:rotate(45deg);transition:transform .35s var(--ease);
}
.faq-pos[open] summary::after{transform:rotate(-135deg)}
.faq-pos summary:hover{color:var(--kobalt)}
.faq-antwort{padding-bottom:1.35rem;color:rgba(20,19,26,.72);max-width:72ch}
.faq-antwort p+p{margin-top:.8rem}
.faq-antwort a{color:var(--kobalt);font-weight:600}

/* ==========================================================================
   STANDORT + CTA
   ========================================================================== */
.ort-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.8rem,4vw,3.5rem);align-items:center}
@media (max-width:860px){.ort-grid{grid-template-columns:1fr}}
.ort-liste{display:grid;gap:1.1rem;margin-top:1.8rem}
.ort-pos{display:flex;gap:1rem;align-items:flex-start}
.ort-pos svg{width:22px;height:22px;flex:none;color:var(--zlato);margin-top:.15rem}
.ort-pos b{display:block;font-weight:600;margin-bottom:.15rem}
.ort-pos span{font-size:.94rem;opacity:.75}
.ort-pos a{color:var(--zlato);text-decoration:none;border-bottom:1px solid rgba(245,197,24,.4)}
.ort-pos a:hover{border-bottom-color:var(--zlato)}
.ort-karte{
  position:relative;aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(150deg,var(--kobalt-hell),var(--kobalt-tief));
  border:1px solid rgba(245,197,24,.25);display:grid;place-items:center;text-align:center;padding:2rem;
}
.ort-karte .platzhalter{font-size:.9rem;opacity:.65;max-width:30ch}

.cta-akt{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center}

/* ==========================================================================
   FUSSZEILE
   ========================================================================== */
.fuss{background:var(--kobalt-tief);border-top:1px solid rgba(245,197,24,.2);padding-block:clamp(3rem,6vw,4.5rem) 2rem;position:relative}
.fuss-band{
  position:absolute;top:0;left:0;right:0;height:6px;
  background:repeating-linear-gradient(90deg,var(--zlato) 0 14px,transparent 14px 20px,var(--cigla) 20px 28px,transparent 28px 34px);
  opacity:.55;
}
.fuss-grid{display:grid;grid-template-columns:1.35fr 1fr 1.1fr .9fr;gap:2.5rem;margin-bottom:2.8rem}
@media (max-width:1000px){.fuss-grid{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.fuss-grid{grid-template-columns:1fr;gap:2rem}}
.fuss-titel{font:600 .78rem/1 var(--body);text-transform:uppercase;letter-spacing:.17em;color:var(--zlato);margin-bottom:1.1rem}
.fuss-links{display:grid;gap:.6rem}
.fuss-links a{font-size:.95rem;opacity:.75;text-decoration:none;transition:opacity .2s,color .2s;width:fit-content;padding-block:.6rem}
.fuss-links a:hover{opacity:1;color:var(--zlato)}
.fuss-marke p{font-size:.95rem;opacity:.7;max-width:38ch;margin-top:1rem}
/* Leitworte wie auf dem Briefbogen: untereinander, gesperrt, mit Goldstrich */
.fuss-marke .fuss-worte{
  display:flex;flex-direction:column;gap:.42rem;opacity:.88;max-width:none;
  margin-top:1.35rem;padding-left:1rem;border-left:2px solid var(--zlato);
  font:600 .78rem/1.15 var(--body);letter-spacing:.26em;text-transform:uppercase;color:var(--vuna);
}
.fuss-sozial a{display:flex;align-items:center;gap:.7rem;min-height:44px;padding-block:.35rem}
.fuss-sozial svg{width:20px;height:20px;flex:none}
.fuss-unten{
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
  padding-top:1.6rem;border-top:1px solid rgba(246,241,231,.1);
  font-size:.86rem;opacity:.6;
}
.fuss-unten nav{display:flex;gap:1.3rem;flex-wrap:wrap}
.fuss-unten nav a{padding-block:.55rem}
.fuss-unten a{text-decoration:none}
.fuss-unten a:hover{color:var(--zlato)}

/* ==========================================================================
   FORMULARE
   ========================================================================== */
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem}
.form-grid .voll{grid-column:1/-1}
@media (max-width:680px){.form-grid{grid-template-columns:1fr}.form-grid .voll{grid-column:auto}}
.feld{display:flex;flex-direction:column;gap:.45rem}
.feld>label,.legende{font:600 .82rem/1 var(--body);letter-spacing:.06em;color:rgba(20,19,26,.66)}
.feld .hinweis{font-size:.8rem;color:rgba(20,19,26,.5)}
.feld input,.feld select,.feld textarea{
  padding:.9rem 1.05rem;border-radius:var(--r);border:2px solid var(--vuna-tief);
  background:#fff;color:var(--tinta);font-size:1rem;width:100%;
  transition:border-color .22s,box-shadow .22s;
}
.feld textarea{min-height:140px;resize:vertical;line-height:1.6}
.feld input:hover,.feld select:hover,.feld textarea:hover{border-color:#cfc6b2}
.feld input:focus,.feld select:focus,.feld textarea:focus{
  outline:0;border-color:var(--kobalt);box-shadow:0 0 0 4px rgba(10,42,107,.13);
}
.feld input:invalid:not(:placeholder-shown){border-color:var(--cigla)}
.pflicht{color:var(--cigla)}

fieldset{border:0;padding:0;margin:0}
.datei-feld{
  position:relative;border:2px dashed var(--vuna-tief);border-radius:var(--r);
  padding:1.5rem;text-align:center;transition:border-color .25s,background .25s;background:#fff;
}
.datei-feld:hover,.datei-feld.ist-ueber{border-color:var(--kobalt);background:rgba(10,42,107,.03)}
.datei-feld input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.datei-feld p{font-size:.94rem;color:rgba(20,19,26,.62)}
.datei-feld b{color:var(--kobalt);font-weight:600}
.datei-name{margin-top:.6rem;font-size:.88rem;font-weight:600;color:var(--kobalt);display:none}
.datei-name.ist-da{display:block}

.zustimmung{display:flex;gap:.85rem;align-items:flex-start;font-size:.9rem;color:rgba(20,19,26,.7);line-height:1.55}
.zustimmung input{width:20px;height:20px;flex:none;margin-top:.15rem;accent-color:var(--kobalt)}
.zustimmung a{color:var(--kobalt);font-weight:600}

.form-karte{background:var(--vuna);color:var(--tinta);border-radius:var(--r-lg);padding:clamp(1.5rem,4vw,2.6rem)}
.form-abschnitt+.form-abschnitt{margin-top:2rem;padding-top:2rem;border-top:1px solid var(--vuna-tief)}
.form-abschnitt h3{font-size:1.22rem;margin-bottom:.4rem;color:var(--tinta)}
.form-abschnitt>p{font-size:.94rem;color:rgba(20,19,26,.6);margin-bottom:1.3rem}
.form-akt{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;margin-top:1.8rem}
.form-akt .btn--geist{--btn-fg:var(--kobalt)}

.mail-hinweis{
  display:none;gap:.9rem;align-items:flex-start;margin-top:1.3rem;padding:1.1rem 1.3rem;
  border-radius:var(--r);background:rgba(245,197,24,.18);border:1px solid rgba(200,154,12,.5);
  font-size:.92rem;color:var(--tinta);line-height:1.55;
}
.mail-hinweis.ist-da{display:flex}
.mail-hinweis svg{width:22px;height:22px;flex:none;color:var(--zlato-tief);margin-top:.1rem}
.mail-hinweis b{font-weight:700}

/* Kontakt-Kacheln */
.kontakt-kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1rem;margin-bottom:clamp(2.5rem,5vw,3.5rem)}
.kachel{
  padding:1.5rem;border-radius:var(--r-lg);text-decoration:none;
  background:rgba(246,241,231,.055);border:1px solid rgba(246,241,231,.12);
  transition:transform .35s var(--ease),border-color .3s,background .3s;
}
.kachel:hover{transform:translateY(-5px);border-color:rgba(245,197,24,.45);background:rgba(246,241,231,.09)}
.kachel svg{width:24px;height:24px;color:var(--zlato);margin-bottom:.9rem}
.kachel b{display:block;font-size:.76rem;letter-spacing:.15em;text-transform:uppercase;opacity:.6;font-weight:600;margin-bottom:.35rem}
.kachel span{font-size:1.05rem;font-weight:600;line-height:1.4;display:block}

/* Seitenkopf für Unterseiten */
.seitenkopf{
  position:relative;overflow:hidden;
  background:linear-gradient(160deg,var(--kobalt) 0%,var(--kobalt-tief) 100%);
  padding-block:clamp(3.5rem,8vw,6rem) clamp(2.5rem,5vw,3.5rem);
}
.seitenkopf::before{
  content:'';position:absolute;top:0;right:0;width:min(46%,520px);aspect-ratio:1/1;
  background:var(--zlato);clip-path:polygon(100% 0,100% 100%,0 0);opacity:.12;
}
.seitenkopf h1{font-size:var(--fs-h1);max-width:22ch;margin-bottom:1rem;position:relative}
.seitenkopf p{font-size:var(--fs-lead);opacity:.82;max-width:54ch;position:relative}
.brotkrume{display:flex;gap:.5rem;font-size:.84rem;opacity:.6;margin-bottom:1.2rem;position:relative}
.brotkrume a{text-decoration:none}
.brotkrume a:hover{color:var(--zlato)}

/* Fließtext-Seiten (Impressum, Datenschutz) */
.text-seite{max-width:74ch}
.text-seite h2{font-size:1.5rem;margin:2.5rem 0 .9rem}
.text-seite h3{font-size:1.12rem;margin:1.8rem 0 .6rem}
.text-seite p,.text-seite li{color:rgba(20,19,26,.76);margin-bottom:.85rem}
.text-seite ul{list-style:disc;padding-left:1.3rem;margin-bottom:1rem}
.text-seite a{color:var(--kobalt);font-weight:500}
.text-seite .luecke{background:rgba(245,197,24,.4);padding:.1em .35em;border-radius:4px;font-weight:600;color:var(--tinta)}

/* Live-Beitrag im Anmeldeformular */
.beitrag-live{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-top:1.4rem;padding:1.1rem 1.4rem;border-radius:var(--r);
  background:var(--kobalt);color:var(--vuna);
}
.beitrag-live span{font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;opacity:.8}
.beitrag-live b{font:800 1.9rem/1 var(--display);color:var(--zlato);letter-spacing:-.04em;font-variant-numeric:tabular-nums}

/* ==========================================================================
   BEWEGUNG — Fortschrittsbalken, Wortenthuellung, Kartenneigung
   ========================================================================== */

/* Goldener Lesefortschritt unter der Kopfzeile */
.fortschritt{
  position:fixed;top:0;left:0;height:3px;z-index:70;
  width:var(--fortschritt,0%);
  background:linear-gradient(90deg,var(--zlato-tief),var(--zlato));
  box-shadow:0 0 12px rgba(217,164,65,.6);
  transition:width .12s linear;
}

/* Ueberschriften enthuellen sich Wort fuer Wort */
.wort-huelle{display:inline-block;overflow:hidden;vertical-align:bottom}
.wort{display:inline-block;transform:translateY(105%);opacity:0}
.hero .wort{filter:blur(8px)}
.ist-sichtbar .wort,.wort.ist-sichtbar{
  transform:none;opacity:1;filter:none;
  transition:transform .9s var(--ease-expo),opacity .6s var(--ease-expo),filter .8s var(--ease-expo);
  transition-delay:calc(var(--i,0) * 65ms);
}

/* Karten kippen leicht zum Mauszeiger */
.kippen{transform-style:preserve-3d;will-change:transform}
.kippen>*{transform:translateZ(0)}


/* Slogan-Zeile, wie auf dem Briefbogen */
.slogan{
  font:italic 600 clamp(1.05rem,2vw,1.45rem)/1.4 var(--display);
  color:var(--zlato);letter-spacing:.005em;
}
.band--creme .slogan{color:var(--zlato-tief)}

@media (prefers-reduced-motion:reduce){
  .wort{transform:none;opacity:1}
  .fortschritt{display:none}
  .wk-band{transform:none}
  .hero-drei span::after{animation:none;transform:scaleX(1)}
  .band--textur::before{animation:none}
}

/* ==========================================================================
   SCROLLBEWEGUNG MIT FARBE
   ========================================================================== */

/* Der Fortschrittsbalken wandert durch die Vereinsfarben */
.fortschritt{
  background:linear-gradient(90deg,
    var(--zlato) 0%, var(--cigla-hell) 34%, var(--kobalt-hell) 62%, var(--zlato) 100%);
  background-size:100vw 100%;
  background-attachment:fixed;
}

/* Überschriften bekommen beim Einfahren einen goldenen Strich */
.band-head h2{position:relative;padding-bottom:.55rem}
.band-head h2::after{
  content:'';position:absolute;left:0;bottom:0;height:4px;width:clamp(56px,7vw,92px);
  border-radius:3px;background:linear-gradient(90deg,var(--zlato),var(--cigla-hell));
  transform:scaleX(0);transform-origin:left;
  transition:transform .9s var(--ease) .2s;
}
.reveal.ist-sichtbar .band-head h2::after,
.band-head.reveal.ist-sichtbar h2::after{transform:scaleX(1)}
.band--creme .band-head h2::after{background:linear-gradient(90deg,var(--kobalt),var(--zlato-tief))}

/* Sparten: Eckschnitt wächst beim Einfahren, dazu ein farbiger Schimmer */
.sparte::before{transform-origin:top right;transform:scale(0);transition:transform .8s var(--ease) .15s,width .45s var(--ease),height .45s var(--ease)}
.sparte.ist-sichtbar::before{transform:scale(1)}
.sparte::after{
  content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;z-index:-1;
  background:radial-gradient(120% 90% at 92% 0%,color-mix(in srgb,var(--akzent) 26%,transparent),transparent 58%);
  opacity:0;transition:opacity 1s var(--ease) .3s;
}
.sparte.ist-sichtbar::after{opacity:1}
.sparte:hover::after{opacity:1;transition-delay:0s}

/* Eventkarten: goldene Oberkante zieht sich auf */
.event{overflow:hidden}
.event::before{
  content:'';position:absolute;left:0;top:0;height:3px;width:100%;
  background:linear-gradient(90deg,var(--zlato),transparent 70%);
  transform:scaleX(0);transform-origin:left;
  transition:transform 1s var(--ease) .25s;
}
.event.ist-sichtbar::before,.reveal.ist-sichtbar .event::before{transform:scaleX(1)}

/* Große Lilie zieht beim Scrollen leicht mit */
.band--wappen::after{translate:0 calc(-50% + var(--parallax,0px));will-change:translate}

/* Bänder bekommen beim Eintreten eine farbige Kante.
   Bewusst als Hintergrundebene und nicht als ::before — dort liegt bei
   .band--textur bereits das Lilienmuster. */
.band--blau,.band--creme{
  background-image:linear-gradient(90deg,transparent,
    var(--zlato) 20%,var(--cigla-hell) 50%,var(--kobalt-hell) 78%,transparent);
  background-repeat:no-repeat;
  background-size:0% 2px;
  background-position:top center;
  transition:background-size 1.4s var(--ease);
}
.band--blau.ist-im-blick,.band--creme.ist-im-blick{background-size:100% 2px}

@media (prefers-reduced-motion:reduce){
  .band-head h2::after{transform:scaleX(1)}
  .sparte::before{transform:scale(1)}
  .sparte::after{opacity:1}
  .event::before{transform:scaleX(1)}
  .band--blau,.band--creme{background-size:100% 2px}
  .band--wappen::after{translate:0 -50%}
  .wertkarte::before{transform:scaleX(1)}
  .wk-band{opacity:.92;transform:none}
}

/* ==========================================================================
   SPRACHUMSCHALTER
   ========================================================================== */
.sprachen{
  display:flex;align-items:center;gap:.3rem;flex:none;
  padding:.28rem;border-radius:999px;
  background:rgba(246,241,231,.07);border:1px solid rgba(217,164,65,.28);
}
.sprache{
  display:grid;place-items:center;width:44px;height:40px;border-radius:8px;
  text-decoration:none;position:relative;
  opacity:.5;filter:saturate(.5);
  transition:opacity .25s var(--ease),filter .25s var(--ease),transform .25s var(--ease);
}
.sprache svg{width:30px;height:20px;display:block;border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.sprache:hover{opacity:.85;filter:none;transform:translateY(-1px)}
.sprache[aria-current="true"]{opacity:1;filter:none;box-shadow:0 0 0 2px var(--zlato)}
.band--creme .sprachen{background:rgba(11,44,94,.06);border-color:rgba(190,123,18,.3)}

/* Auf Touchgeraeten die volle Tippflaeche, auch wenn die Flagge klein bleibt */
@media (max-width:1200px){
  .sprache{height:44px}
}
@media (max-width:420px){
  .sprache{width:40px}
  .sprache svg{width:26px;height:18px}
  .marke-txt{display:none}
  .marke-logo,.kopf-in .marke-logo{width:40px;height:40px}
}

/* Hinweis, wenn die gemerkte Sprache eine andere ist als die angezeigte */
.sprach-hinweis{
  display:none;align-items:center;justify-content:center;gap:.9rem;flex-wrap:wrap;
  padding:.7rem var(--gut);text-align:center;
  background:var(--zlato);color:var(--tinta);
  font-size:.92rem;font-weight:500;
}
.sprach-hinweis.ist-da{display:flex}
.sprach-hinweis a{color:var(--kobalt-tief);font-weight:700}
.sprach-hinweis button{
  border:0;background:transparent;cursor:pointer;
  min-width:44px;min-height:44px;display:grid;place-items:center;
  font-size:1.35rem;line-height:1;color:var(--tinta);opacity:.6;border-radius:8px;
}
@media (max-width:640px){
  .sprach-hinweis{padding:.5rem .75rem;gap:.5rem;font-size:.86rem;text-align:left;
                  justify-content:space-between;flex-wrap:nowrap}
  .sprach-hinweis span{flex:1;min-width:0}
  .sprach-hinweis a{white-space:nowrap}
}
.sprach-hinweis button:hover{opacity:1;background:rgba(20,19,26,.1)}

/* ==========================================================================
   HINWEIS ZU GESPEICHERTEN DATEN
   ========================================================================== */
.hinweis-leiste{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  background:var(--kobalt-tief);color:var(--vuna);
  border-top:2px solid var(--zlato);
  box-shadow:0 -18px 46px -26px rgba(0,0,0,.9);
  transform:translateY(110%);
  transition:transform .55s var(--ease);
}
.hinweis-leiste.ist-da{transform:none}
.hinweis-in{
  display:flex;align-items:center;gap:clamp(1rem,3vw,2rem);flex-wrap:wrap;
  padding-block:1.1rem;
}
.hinweis-in p{font-size:.92rem;line-height:1.6;flex:1;min-width:min(100%,320px);opacity:.88}
@media (max-width:640px){
  .hinweis-leiste{max-height:46svh;overflow-y:auto}
  .hinweis-in{padding-block:.9rem;gap:.8rem}
  .hinweis-in p{font-size:.83rem;line-height:1.45}
  .hinweis-in .btn{width:100%;padding:.85rem 1.2rem}
}
.hinweis-in p b{color:var(--zlato);font-weight:700}
.hinweis-in a{color:var(--zlato);text-decoration:underline;text-underline-offset:3px}
.hinweis-in .btn{flex:none;padding:.8rem 1.6rem}
@media (prefers-reduced-motion:reduce){
  .hinweis-leiste{transition:none}
}

/* ==========================================================================
   HANDY-FEINSCHLIFF
   ========================================================================== */

/* Lange Wörter wie "Beitrittserklärung" oder eine Mailadresse dürfen in
   schmalen Spalten umbrechen, statt aus der Box zu laufen */
body{overflow-wrap:break-word}

/* Der blaue Blitz beim Antippen wirkt unfertig, ein dezenter Goldschimmer passt */
a,button,label,summary,input,select,textarea{-webkit-tap-highlight-color:rgba(217,164,65,.22)}

/* Ankersprünge dürfen nicht unter der Kopfzeile landen */
@media (max-width:1200px){
  html{scroll-padding-top:5rem}
}

/* Zustimmungshäkchen auf dem Handy etwas größer */
@media (max-width:640px){
  .zustimmung input{width:24px;height:24px}
  .zustimmung{gap:.75rem;font-size:.88rem}
}

/* Offenes Menü soll die Seite dahinter nicht mitscrollen */
@media (max-width:1200px){
  .nav.ist-offen{overscroll-behavior:contain}
}

/* Auf sehr schmalen Geräten die Überschriften eine Spur zurücknehmen,
   damit sie nicht die halbe Höhe fressen */
@media (max-width:360px){
  :root{--fs-mega:2.25rem;--fs-h1:1.95rem;--fs-h2:1.65rem}
  .kicker{letter-spacing:.14em;font-size:.72rem}
}

/* Karten nicht kippen lassen, wo mit dem Finger bedient wird:
   der Effekt bleibt sonst nach dem Antippen hängen */
@media (hover:none){
  .kippen{transform:none !important}
  .sparte:hover{transform:none}

  /* Werte: ohne Mauszeiger laesst sich nichts aufdecken, also steht beides da */
  .wertkarte{min-height:0;padding-block:clamp(1.9rem,7vw,2.5rem)}
  .wertkarte:hover,.wertkarte:focus-within{transform:none;box-shadow:none}
  .wk-titel{font-size:clamp(1.55rem,6.5vw,2.1rem)}
  .wertkarte:hover .wk-titel,.wertkarte:focus-within .wk-titel{opacity:1;transform:none}
  .wk-text{position:static;opacity:1;transform:none;margin-top:1rem;pointer-events:auto}
  .wk-band{opacity:.15}
  .wertkarte.ist-sichtbar .wk-band{opacity:.15}
  .wertkarte:hover .wk-band,.wertkarte:focus-within .wk-band{opacity:.15}
}

/* ==========================================================================
   FEINSCHLIFF SEPTEMBER 2026
   Ein Moment mit Handschrift (die Flagge im Hero), ein Hoehepunkt in der
   Mitte (Leitsatz im Cilim-Band), dazu die Details, die man nicht sieht,
   aber spuert.
   ========================================================================== */

/* --- Der Button in der Kopfzeile ist zugleich ein Navigationslink und
       wuerde sonst dessen Uebergaenge erben ------------------------------ */
.nav .btn{transition:transform .22s var(--ease-out),box-shadow .3s var(--ease-out),background-color .2s ease,color .2s ease}

/* --- Browser-Oberflaechen in den Vereinsfarben ------------------------- */
html{scrollbar-color:var(--zlato-tief) var(--kobalt-tief);scrollbar-width:thin}
input,textarea{caret-color:var(--zlato-tief)}
input[type=checkbox],input[type=radio]{accent-color:var(--kobalt)}
.ueber-text a,.faq-antwort a,.band-head p a,.text-seite a{
  text-decoration-thickness:1px;text-underline-offset:.22em;
  transition:text-decoration-color .2s ease,color .2s ease;
}
h2{text-wrap:balance}

/* --- Leitsatz: das Cilim-Band des Vereins, der Satz in der Luecke ------ */
.leitsatz{
  position:relative;overflow:hidden;isolation:isolate;
  padding-block:clamp(3.75rem,8vw,6.5rem);
  display:grid;place-items:center;text-align:center;
}
.leitsatz.reveal{opacity:1;transform:none}
.leitsatz-band{
  position:absolute;top:50%;width:50%;height:clamp(92px,12vw,156px);
  translate:0 -50%;z-index:-1;opacity:.95;
  background:url('img/cilim-band.png') center/auto 100% repeat-x;
  transition:transform 1.5s var(--ease-expo),opacity 1.2s var(--ease-expo);
}
.leitsatz-band--links{
  left:0;background-position:right center;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 38%,transparent 88%);
  mask-image:linear-gradient(90deg,#000 0,#000 38%,transparent 88%);
}
.leitsatz-band--rechts{
  right:0;background-position:left center;
  -webkit-mask-image:linear-gradient(270deg,#000 0,#000 38%,transparent 88%);
  mask-image:linear-gradient(270deg,#000 0,#000 38%,transparent 88%);
}
.leitsatz-text{
  margin:0;padding-inline:var(--gut);
  font:800 clamp(2rem,4.8vw,3.9rem)/1.04 var(--display);letter-spacing:-.035em;
  color:var(--vuna);text-shadow:0 2px 28px rgba(4,26,61,.85);
  display:flex;flex-wrap:wrap;justify-content:center;gap:0 .32em;
}
.leitsatz-text span{display:inline-block}
.leitsatz-text span+span{color:var(--zlato)}
/* Auftritt: die Bandhaelften ruecken zusammen, der Satz oeffnet sich aus der Mitte */
.leitsatz.reveal:not(.ist-sichtbar) .leitsatz-band--links{transform:translateX(-22%);opacity:0}
.leitsatz.reveal:not(.ist-sichtbar) .leitsatz-band--rechts{transform:translateX(22%);opacity:0}
.leitsatz-text{clip-path:inset(-20% 0 -20% 0);transition:clip-path 1.2s var(--ease-expo) .2s}
.leitsatz.reveal:not(.ist-sichtbar) .leitsatz-text{clip-path:inset(-20% 50% -20% 50%)}

/* --- Programm: die cremefarbene Bildflaeche hebt sich wie ein Vorhang --- */
.sparte.reveal .sparte-bild{clip-path:inset(100% 0 0 0);transition:clip-path 1s var(--ease-expo) .12s}
.sparte.reveal.ist-sichtbar .sparte-bild{clip-path:inset(0)}
.sparte.reveal .sparte-bild img{transform:scale(1.1);transition:transform 1.3s var(--ease-expo) .12s}
.sparte.reveal.ist-sichtbar .sparte-bild img{transform:none}
@media (hover:hover) and (pointer:fine){
  .sparte.reveal.ist-sichtbar:hover .sparte-bild img{transform:scale(1.06) rotate(-1.5deg);transition-duration:.7s;transition-delay:0s}
}

/* --- Mitgliedsausweis: wird hingelegt wie eine echte Karte ------------- */
.ausweis.reveal{
  transform:perspective(1200px) rotateX(12deg) translateY(34px);transform-origin:50% 100%;
  transition:opacity .9s var(--ease-expo) .1s,transform 1.2s var(--ease-expo) .1s;
}
.ausweis.reveal.ist-sichtbar{transform:none}

/* --- Werte: der Hinweis aufs Darueberfahren nur, wo es eine Maus gibt -- */
@media (hover:none){.nur-maus{display:none}}

@media (prefers-reduced-motion:reduce){
  .leitsatz-band,.leitsatz-text,.sparte-bild,.sparte-bild img,.ausweis.reveal{transition:none !important}
  .leitsatz.reveal:not(.ist-sichtbar) .leitsatz-band--links,
  .leitsatz.reveal:not(.ist-sichtbar) .leitsatz-band--rechts{transform:none;opacity:.95}
  .leitsatz.reveal:not(.ist-sichtbar) .leitsatz-text{clip-path:none}
  .sparte.reveal .sparte-bild{clip-path:none}
  .sparte.reveal .sparte-bild img{transform:none}
  .ausweis.reveal{transform:none}
  .hero .wort{filter:none}
  .btn:not(.btn--geist)::after{display:none}
}

/* --- Kopfzeile auf grossen Handys (z. B. iPhone Pro Max, 430 bis 440 px) --
   Zwischen 421 und 640 px stand der Vereinsname samt Untertitel in voller
   Breite und schob den Menuknopf aus dem Bild. Jetzt darf der Name kuerzer
   werden, statt die Zeile zu sprengen. */
@media (max-width:640px){
  .kopf-in{gap:.75rem}
  .kopf-in .marke{flex:0 1 auto;min-width:0}
  .kopf-in .marke-txt{min-width:0}
  .kopf-in .marke-sub{display:none}
  .kopf-in .marke-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.98rem}
  .kopf-in .sprachen,.kopf-in .burger{flex:none}
  /* ein paar Pixel Luft, damit der Name auch auf 430 px ganz dasteht */
  .kopf-in .marke{gap:.6rem}
  .kopf-in .marke-logo{width:42px;height:42px}
  .kopf-in .sprachen{gap:.2rem;padding:.2rem}
}

/* --- Sicherheitsnetz gegen seitliches Wischen -----------------------------
   iOS Safari laesst die Seite trotz overflow-x:hidden am body seitlich
   verschieben, sobald irgendein Element zu breit ist. clip am Wurzelelement
   verhindert das zuverlaessig und laesst die klebende Kopfzeile in Ruhe.
   Aeltere Browser ignorieren clip und behalten das hidden von oben. */
html{overflow-x:clip}
body{overflow-x:hidden;overflow-x:clip}