/* ==========================================================================
   DevilsMadness · VORSCHLAG 4 "Zwei Stränge, eine Kette"

   Die Zusammenführung:
     Hero          aus Vorschlag 2 (Foto, mittig, Wort für Wort)
     ab Abschnitt 2 aus Vorschlag 3 (ruhig, fester Grund, Kacheln)
     3D            die Kette aus Vorschlag 3, bewegt wie die Doppelhelix
                   aus Vorschlag 2, fest hinter der ganzen Seite

   FARBEN
   Lime und Orange, exakt wie in Branding.md. Diese Datei überschreibt
   KEINEN einzigen Farbwert. Alles kommt unverändert aus /assets/style.css.
   Damit bleibt die Farbtabelle im Vault gültig und muss nicht angefasst
   werden.
   ========================================================================== */

:root { --ease-studio: cubic-bezier(0.16, 1, 0.3, 1); }

/* --------------------------------------------------------------------------
   1. VERSALIEN-DIAET
   Live schreit alles: h1, h2, h3, jeder Knopf, jedes Label, die Fusszeile.
   Wenn alles schreit, betont nichts mehr. Anton-Versalien bleiben den
   Ueberschriften vorbehalten.
   -------------------------------------------------------------------------- */
h3 {
  font-family: var(--font-sans); font-weight: 700;
  text-transform: none; line-height: 1.25; letter-spacing: 0;
}
.btn {
  font-family: var(--font-sans); font-weight: 700;
  text-transform: none; letter-spacing: 0.01em; font-size: 0.98rem;
}
.foot__bottom { text-transform: none; letter-spacing: 0; line-height: 1.6; }

/* --------------------------------------------------------------------------
   2. DIE EBENEN

   Reihenfolge von hinten nach vorn:
     -3  das Hero-Foto      (scrollt mit dem Hero weg)
     -2  die Kette          (fest, bleibt die ganze Seite ueber da)
     -1  die Abdunkelung    (fest)
      0  alles Inhaltliche

   Negative Ebenen funktionieren nur, solange kein Vorfahre einen eigenen
   Stapelkontext aufmacht. Deshalb bekommen main, section und .chero
   bewusst KEIN z-index und kein isolation.
   -------------------------------------------------------------------------- */
.chain {
  position: fixed; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  pointer-events: none; display: block;
}
/* Die Abdunkelung ist am staerksten dort, wo die Schrift steht, und laesst
   zum unteren Rand hin wieder nach. Vorher lief sie bis 0.84 durch, dadurch
   war der untere Bildrand praktisch schwarz und das Foto darunter verloren.
   Genau das war auf dem Handy der tote Streifen. */
.chain-scrim {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(125% 80% at 22% 74%, rgba(22, 24, 26, 0.88), transparent 62%),
    linear-gradient(180deg,
      rgba(22, 24, 26, 0.30) 0%,
      rgba(22, 24, 26, 0.78) 64%,
      rgba(22, 24, 26, 0.58) 100%);
}

/* Ab dem zweiten Abschnitt bekommt der Inhalt festen Grund unter die
   Fuesse, sonst laeuft Metall hinter Fliesstext durch. */
.solid { background: var(--bg); }

/* --------------------------------------------------------------------------
   3. KOPFZEILE, schwebend

   NUR auf der Startseite. Dort liegt ein Foto darunter, das traegt eine
   durchsichtige Leiste. Auf /packliste und /festivals beginnt direkt unter
   der Leiste Fliesstext, da waere sie unlesbar. Deshalb die Eingrenzung
   ueber die Klasse am body statt einer globalen Regel.
   -------------------------------------------------------------------------- */
.seite-start .nav {
  position: fixed; top: 0; left: 0; right: 0;
  background: transparent; border-bottom-color: transparent;
  backdrop-filter: none;
  transition: background 0.35s var(--ease-studio),
              border-color 0.35s var(--ease-studio),
              backdrop-filter 0.35s var(--ease-studio);
}
.seite-start .nav.is-solid {
  background: rgba(22, 24, 26, 0.88);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--line);
}

/* --------------------------------------------------------------------------
   4. HERO, uebernommen aus Vorschlag 2
   Foto als Grundlage, Inhalt senkrecht mittig, Ueberschrift Wort fuer Wort.
   -------------------------------------------------------------------------- */
.chero {
  position: relative;
  min-height: min(92dvh, 820px);
  display: flex; align-items: center;
  padding-block: clamp(96px, 12vw, 130px) clamp(44px, 7vw, 80px);
  overflow: hidden;
}
/* Die Regel fuer .chero__photo steht bewusst weiter unten, direkt hinter
   .photo. Sonst ueberschreibt .photo mit seinem position:relative das
   position:absolute hier, das Foto steht als normales Flex-Element im
   Fluss und nimmt der Schrift die halbe Breite weg. */
.chero__inner { position: relative; width: 100%; }

.chero h1 {
  /* Obergrenze so gewaehlt, dass "Nie wieder ohne Panzertape" bei
     1180 px Spaltenbreite in eine Zeile passt. */
  font-size: clamp(2.3rem, 6.2vw, 5rem);
  line-height: 0.98;
  margin-bottom: clamp(14px, 2vw, 22px);
  text-shadow: 0 4px 44px rgba(0, 0, 0, 0.62);
}
.chero h1 em { font-style: normal; color: var(--lime); }
.hline { display: block; }

/* Wortweiser Aufbau. overflow:hidden wuerde die Unterlaenge vom p in
   "Panzertape" abschneiden, deshalb unten Luft schaffen und per
   negativem Aussenabstand wieder herausrechnen. */
.w {
  display: inline-block; overflow: hidden; vertical-align: bottom;
  padding-bottom: 0.14em; margin-bottom: -0.14em;
}
.wi { display: inline-block; will-change: transform; }

.chero__sub {
  color: var(--ink); opacity: 0.82;
  font-size: clamp(1rem, 1.9vw, 1.28rem);
  font-weight: 300; max-width: 44ch;
  margin-bottom: clamp(20px, 3vw, 32px);
}
.chero__cta { display: flex; flex-wrap: wrap; gap: 13px; align-items: center; }
.chero__hint { color: var(--ink-dim); font-size: 0.86rem; }

/* --------------------------------------------------------------------------
   HERO AUF DEM HANDY

   Zwei Korrekturen gegenueber der ersten Fassung:

   1. Volle Bildschirmhoehe statt 92 %. Vorher blieben unten 65 px vom
      naechsten Abschnitt stehen. Dieser Streifen hat den Hero abgeschnitten
      wirken lassen, statt ihn sauber enden zu lassen.

   2. Inhalt nach unten statt mittig. Bei mittiger Ausrichtung endete die
      CTA schon bei 572 von 812 px, darunter lagen 175 px Nichts. Jetzt
      sitzt der Block im unteren Drittel, und was darunter bleibt, ist
      sichtbares Foto statt schwarzer Flaeche.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .chero {
    min-height: 100dvh;
    align-items: flex-end;
    padding-block: 110px clamp(104px, 17vh, 150px);
  }
}

/* Nur solange JavaScript uebernimmt. Ohne JS steht alles sofort da. */
.js .stagger { opacity: 0; }

/* --------------------------------------------------------------------------
   5. FOTOEBENE
   Lichter ziehen ins Lime, Schatten ins Orange. Damit traegt jedes Foto
   die Palette, auch wenn das Material aus verschiedenen Quellen kommt.
   -------------------------------------------------------------------------- */
.photo { position: relative; overflow: hidden; background: var(--panel); }
.photo img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.15) brightness(0.7);
}
.photo::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(212deg, rgba(198, 244, 50, 0.20), transparent 56%),
    linear-gradient(18deg, rgba(242, 116, 48, 0.20), transparent 52%),
    linear-gradient(0deg, rgba(22, 24, 26, 0.92), rgba(22, 24, 26, 0.16));
}
/* Das Hero-Foto MUSS hier stehen und nicht oben bei .chero, weil es
   sonst von .photo { position: relative } wieder eingefangen wird.
   Kein isolation, damit die negative Ebene greift und die Kette davor
   liegen kann. */
.chero__photo { position: absolute; inset: 0; z-index: -3; }

/* --------------------------------------------------------------------------
   6. ZWEI LISTEN
   Keine umrandeten Karten. Die Baendchen-Kante steht links und traegt
   die Farbe.
   -------------------------------------------------------------------------- */
.clists { display: grid; gap: clamp(20px, 3vw, 34px); grid-template-columns: 1fr; }
@media (min-width: 880px) { .clists { grid-template-columns: 1fr 1fr; } }
.clist { display: flex; gap: 20px; }
.clist__band { flex: none; width: 10px; border-radius: var(--r-pill); }
.clist__body { min-width: 0; }
.clist h3 { font-size: 1.34rem; margin-bottom: 4px; }
.clist--personal h3 { color: var(--lime); }
.clist--camp h3 { color: var(--orange); }
.clist__who { font-size: 0.87rem; color: var(--ink-dim); margin-bottom: 20px; }

/* --------------------------------------------------------------------------
   7. DIE RECHNUNG, vollbreites Band
   -------------------------------------------------------------------------- */
.cbleed { background: linear-gradient(180deg, #191c1f, var(--bg)); border-block: 1px solid var(--line); }
.ccalc { display: grid; gap: clamp(28px, 4vw, 52px); align-items: center; }
@media (min-width: 900px) { .ccalc { grid-template-columns: 0.72fr 1.28fr; } }
.ccalc__dials { display: grid; gap: 18px; }
.ccalc__out { display: grid; gap: clamp(20px, 3vw, 30px); grid-template-columns: 1fr; }
@media (min-width: 640px) { .ccalc__out { grid-template-columns: repeat(3, 1fr); } }
.cstat__k { font-weight: 700; font-size: 0.95rem; margin-bottom: 8px; }
.cstat__v {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 5.4vw, 3.4rem); line-height: 1;
  color: var(--lime); font-variant-numeric: tabular-nums;
}
.cstat--camp .cstat__v { color: var(--orange); }
.cstat__note { font-size: 0.82rem; color: var(--ink-dim); margin-top: 8px; max-width: 26ch; }

/* --------------------------------------------------------------------------
   8. FESTIVAL-KACHELN
   -------------------------------------------------------------------------- */
.ctiles { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .ctiles { grid-template-columns: repeat(3, 1fr); } }
.ctile { display: flex; flex-direction: column; }
.ctile__img { aspect-ratio: 4 / 3; border-radius: var(--r-lg) var(--r-lg) 0 0; }
.ctile__body {
  background: var(--panel); border: 1px solid var(--line); border-top: 0;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  padding: 18px 20px 20px; flex: 1;
}
.ctile__name {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: 1.34rem; line-height: 1.1; margin-bottom: 3px;
}
.ctile__when { font-size: 0.85rem; font-weight: 700; margin-bottom: 16px; }
.ctile__when--live { color: var(--orange); }
.ctile__when--up { color: var(--lime); }
.ctile__when--past { color: var(--ink-dim); font-weight: 500; }
/* Bewusst KEINE Versalien mit Sperrung. Dreimal nebeneinander
   "WASSER BEZAHLEN GLAS WETTER" ist der Datenblatt-Look, der die Seite
   technisch und tot wirken laesst. */
.cfacts { display: grid; gap: 11px; }
.cfact__k { font-size: 0.75rem; color: var(--petrol); font-weight: 700; }
.cfact__v { font-size: 0.87rem; color: var(--ink-dim); }
.cfact__v--warn { color: var(--orange); }

/* --------------------------------------------------------------------------
   9. ERSTTAETER / VETERAN als Umschalter
   -------------------------------------------------------------------------- */
.cswitch {
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-pill); margin-bottom: 26px;
}
.cswitch__btn {
  border-radius: var(--r-pill); padding: 0 22px; min-height: 44px;
  font-weight: 700; font-size: 0.92rem; color: var(--ink-dim);
  transition: color 0.18s, background 0.18s;
}
.cswitch__btn[aria-pressed='true'] { background: var(--lime); color: var(--on-lime); }
.cswitch__btn:not([aria-pressed='true']):hover { color: var(--ink); }
.citems { display: grid; max-width: 62ch; }
.crow { display: grid; gap: 3px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.crow:last-child { border-bottom: 0; }
.crow__n { font-weight: 700; }
.crow__t { color: var(--ink-dim); font-size: 0.92rem; }

/* --------------------------------------------------------------------------
   10. ABSCHLUSS
   Durchsichtig, damit die Kette hinter dem letzten Satz sichtbar wird.
   Sie schliesst die Klammer zum Hero.
   -------------------------------------------------------------------------- */
.cend { position: relative; text-align: center; padding-block: clamp(90px, 14vw, 170px); }
.cend h2 { font-size: clamp(2.2rem, 7vw, 4.4rem); margin-bottom: 16px; }
.cend p { max-width: 44ch; margin: 0 auto 30px; color: var(--ink-dim); font-size: 1.06rem; }
.cend__kicker { color: var(--lime); font-weight: 700; font-size: 0.95rem; margin-bottom: 14px; }

/* --------------------------------------------------------------------------
   11. ABSCHNITTS-KOEPFE
   -------------------------------------------------------------------------- */
.sec-head h2 { font-size: clamp(1.9rem, 4.6vw, 3rem); }
.sec-head p { font-size: 1.02rem; }

/* ==========================================================================
   UNTERSEITEN

   Beide erben Farben, Schriften, Versalien-Diaet, Knoepfe und Fusszeile
   aus den Abschnitten oben. Hier steht nur, was zusaetzlich noetig ist.
   ========================================================================== */

/* --------------------------------------------------------------------------
   13. GENERATOR  (/packliste)

   BEWUSSTE ENTSCHEIDUNG: hier laeuft KEINE Kette.

   Die Startseite darf etwas kosten, sie wirbt. Der Generator ist Werkzeug.
   Wer ihn benutzt, steht mit halbem Akku im Funkloch auf einer Wiese und
   will eine Liste abhaken. 655 KB Three.js dafuer nachzuladen waere gegen
   den Zweck der Seite. Stattdessen derselbe Hintergrund, den die Kette bei
   reduzierter Bewegung hinterlaesst: gleiche Familie, null Kosten.
   -------------------------------------------------------------------------- */
.seite-werkzeug {
  background:
    radial-gradient(120% 70% at 78% -10%, rgba(198, 244, 50, 0.07), transparent 60%),
    radial-gradient(100% 60% at 10% 8%, rgba(242, 116, 48, 0.06), transparent 55%),
    var(--bg);
  background-attachment: fixed;
}

/* Der Fortschritt bleibt das Baendchen, das ist die Signatur der Marke. */
.gen { padding-top: 34px; }

/* "Frage 3 / 7" ist eine Angabe, kein Etikett. Gesperrte Versalien machen
   daraus ein Etikett. */
.qhead {
  text-transform: none; letter-spacing: 0;
  font-size: 0.85rem; color: var(--petrol); font-weight: 700;
}
.qtitle { margin-bottom: 10px; }
.qsub { font-size: 1.02rem; }

.opt { padding: 17px 19px; }
.opt__l { font-size: 1.02rem; }

/* Die Infobox trug ihre Symbolspalte frueher als Emoji. Jetzt steht dort
   eine Beschriftung, die auch vorgelesen werden kann. */
.infobox h2 {
  text-transform: none; letter-spacing: 0;
  font-size: 0.9rem; color: var(--petrol);
}
.inforow { gap: 14px; align-items: baseline; }
.inforow__k {
  flex: none; width: 8ch;
  font-size: 0.78rem; font-weight: 700; color: var(--petrol);
}

/* Kategorien in der fertigen Liste: ruhiger, ohne Sperrung. */
.cat__h {
  text-transform: none; letter-spacing: 0;
  font-size: 0.92rem; padding-bottom: 9px;
}
/* Die Umschalter ueber der Liste sind Knoepfe, keine Ueberschriften. */
.tab {
  font-family: var(--font-sans); font-weight: 700;
  text-transform: none; letter-spacing: 0;
  font-size: 0.96rem;
}

/* --------------------------------------------------------------------------
   14. KALENDER  (/festivals)

   Hier laeuft die Kette mit, die Seite ist naeher an der Startseite als am
   Werkzeug. Der Inhalt bekommt trotzdem festen Grund, damit kein Metall
   hinter den Terminen durchlaeuft.
   -------------------------------------------------------------------------- */
.kal-kopf { padding-block: clamp(30px, 5vw, 54px) clamp(20px, 3vw, 30px); }
.kal-kopf h1 {
  font-size: clamp(2rem, 5.6vw, 3.6rem);
  line-height: 1.0; margin-bottom: 14px;
}
.kal-kopf p { color: var(--ink-dim); max-width: 62ch; font-size: 1.02rem; }

/* Genre statt gesperrter Versalien. */
.fcard__genre { text-transform: none; letter-spacing: 0; font-size: 0.78rem; }

/* .fstack ist ein <ol>. list-style:none nimmt den Aufzaehlungspunkt weg,
   aber NICHT die Standard-Einrueckung von 40 px, die der Browser jeder
   Liste mitgibt. Auf dem Handy hat das 11 % der Bildschirmbreite gefressen:
   die Karten waren 320 statt 360 breit, die Knoepfe darin nur 202 statt
   312. Genau deshalb sind die Beschriftungen umgebrochen. */
.fstack { padding-inline: 0; }

/* Sicherheitsnetz: .btn setzt white-space:nowrap, damit Knopfbeschriftungen
   nicht umbrechen. In den Festivalkarten sind die Knoepfe auf schmalen
   Geraeten aber volle Breite, und ein langer Name lief dann seitlich aus
   dem Knopf heraus. Hier darf umgebrochen werden, bevor etwas abschneidet. */
.fcard__btn {
  white-space: normal;
  text-align: center;
  line-height: 1.25;
  padding-block: 11px;
}
.fcount { font-style: normal; }
.fchip { font-weight: 500; }

/* --------------------------------------------------------------------------
   15. TOUCH-ZIELE

   Das Livesystem gibt .nav__link und .foot__link schon 44 px mit, andere
   Bedienelemente aber nicht. Auf dem Handy gemessen: Filter-Chips 41 px,
   Zurueck-Knopf 38 px, Logo 33 px. Wenige Pixel, aber genau die, die man
   mit klammen Fingern auf einer Wiese danebentippt.

   Ausgenommen bleiben die Links im Fliesstext der Fusszeile. Fuer Links
   mitten im Satz gilt die Mindestgroesse nicht, und 44 px wuerden den
   Zeilenfall zerreissen.
   -------------------------------------------------------------------------- */
.logo, .fchip, .fcard__btn, .backlink, .pill {
  display: inline-flex; align-items: center;
  min-height: 44px;
}
.fchip, .pill { justify-content: center; }

/* --------------------------------------------------------------------------
   16. SICHERER BEREICH UNTEN

   Die Kopfzeile beruecksichtigt links und rechts schon env(safe-area-inset).
   Unten fehlte es: auf einem iPhone liegt dort der Streifen fuer die
   Home-Geste, und die letzte Zeile der Fusszeile rutscht darunter.
   -------------------------------------------------------------------------- */
.foot { padding-bottom: max(34px, env(safe-area-inset-bottom)); }

/* --------------------------------------------------------------------------
   17. LANGE ERGEBNISLISTE

   Die fertige Packliste hat im Normalfall rund 44 Positionen, kann bei
   grosser Gruppe und vielen Tagen aber ueber 50 gehen. Statt eine echte
   Virtualisierung einzubauen reicht hier der Browser-eigene Weg: was
   ausserhalb des Sichtfelds liegt, wird nicht gerendert.

   contain-intrinsic-size gibt die geschaetzte Hoehe vor. Ohne sie springt
   die Bildlaufleiste, sobald ein Block tatsaechlich gerendert wird.
   -------------------------------------------------------------------------- */
.cat {
  content-visibility: auto;
  contain-intrinsic-size: auto 420px;
}

/* --------------------------------------------------------------------------
   18. BEWEGUNG ABSCHALTEN
   Bei reduzierter Bewegung faellt die Kette weg und der Hintergrund wird
   ein ruhiger Verlauf. Die Seite bleibt vollstaendig, nicht halb.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .chain { display: none; }
  .chain-scrim { background: linear-gradient(160deg, #1d2226, var(--bg) 58%); }
  .js .stagger { opacity: 1; }
  .wi { transform: none !important; }
  .nav { background: rgba(22, 24, 26, 0.88); border-bottom-color: var(--line); }
}


/* --------------------------------------------------------------------------
   19. ERSATZ FUER INLINE-STYLES
   Am 17.09.2026 im echten Browser gemessen: Die Content-Security-Policy der
   Seite erlaubt "style-src 'self'". Damit blockt der Browser JEDES
   style="..."-Attribut im ausgelieferten HTML, auf allen vier geprueften
   Seiten. Die Abstaende und Farben darin kamen also nie an.

   Der Fehler ist statisch nicht sichtbar: Im Quelltext steht das Attribut da,
   nur angewendet wird es nicht. Aufgefallen ist es erst, als die Konsole des
   echten Browsers mitgelesen wurde.

   Bewusst so geloest, statt 'unsafe-inline' in die Policy aufzunehmen. Die
   Policy weich zu machen, um ein paar Abstaende zu retten, waere der falsche
   Tausch: Genau diese Direktive haelt fremdes eingeschleustes Style-Markup
   auf. Die Regeln unten sind Eins-zu-eins-Uebersetzungen der frueheren
   Attribute, es aendert sich nichts am Aussehen ausser dass es jetzt greift.
   -------------------------------------------------------------------------- */

/* Kopf und Fuss, auf allen Seiten gleich */
.btn--nav { padding: 12px 20px; font-size: 0.88rem; }
.foot__col--brand { flex: 1 1 240px; }
.foot__brand-akzent { color: var(--lime); }
.foot__bottom--schlicht { border: 0; margin: 0; padding: 0; text-align: center; }
.link--erbt { color: inherit; }

/* Startseite, Termine, Rechtstexte, 404 */
.ctiles__mehr { margin-top: 24px; }
.solid--liste { padding-block: 8px 80px; }
.notebox--abgesetzt { margin-top: 28px; }
.zurueckzeile { margin-top: 34px; }
.prose--zentriert { text-align: center; }
.fehlertext { margin-bottom: 28px; }
.btnrow { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Generator: aus wizard.js erzeugtes Markup */
.dial--abstand { margin-bottom: 18px; }
.dial__unit { color: var(--ink-dim); font-size: 0.9rem; }
.weiterrow { display: flex; justify-content: flex-end; }
.camplabel { font-weight: 700; margin-bottom: 8px; }
.camplabel--zweit { font-weight: 700; margin: 22px 0 8px; }
.camplabel__hint {
  display: block; font-weight: 400;
  color: var(--ink-dim); font-size: 0.84rem;
}
.leise { font-weight: 400; color: var(--ink-dim); }
.btn--klein { padding: 9px 16px; font-size: 0.82rem; }
.qtitle--eng { margin-bottom: 14px; }
.followup__q--luft { margin-top: 16px; }
.followup__q--dicht { margin-top: 0; }

/* --------------------------------------------------------------------------
   20. GENRE-CHIPS: DER ZAEHLER KLEBTE AN DER BESCHRIFTUNG
   Auf /festivals stand "Alle20" und "Metal3" statt "Alle 20". Ursache ist
   nicht die Policy oben, sondern Abschnitt 15: dort bekommt .fchip
   display:inline-flex, damit das Touch-Ziel 44 px hoch wird. In einem
   Flex-Container faellt ein reines Leerzeichen zwischen zwei Kindern weg,
   und genau dieses Leerzeichen trennte Beschriftung und Zahl.

   Ein zweites Beispiel dafuer, dass eine spaetere Regel eine fruehere still
   kaputt macht. Im Quelltext steht das Leerzeichen naemlich sauber drin.
   -------------------------------------------------------------------------- */
.fchip { gap: 6px; }