/* ============================================================
   TextSells® / Laura Gintar
   Zentrale Stilvorlage für alle Seiten.
   Farben, Schriften, Kopfbereich und Grundbausteine
   werden HIER geändert und wirken überall.
   ============================================================ */

/* ---------- Schriften ----------
   Liegen lokal unter assets/fonts/. Dadurch wird beim Aufruf der
   Seite keine Verbindung zu Google-Servern aufgebaut und es werden
   keine IP-Adressen der Besucher übertragen.
   font-display: swap zeigt sofort eine Ersatzschrift, damit der Text
   nicht unsichtbar bleibt, während die Schrift lädt. */

@font-face {
  font-family: "Familjen Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/familjen-grotesk-v11-latin_latin-ext-500.woff2") format("woff2");
}
@font-face {
  font-family: "Familjen Grotesk";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/familjen-grotesk-v11-latin_latin-ext-600.woff2") format("woff2");
}
@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/raleway-v37-latin_latin-ext-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/raleway-v37-latin_latin-ext-500.woff2") format("woff2");
}
@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/raleway-v37-latin_latin-ext-600.woff2") format("woff2");
}
@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/raleway-v37-latin_latin-ext-700.woff2") format("woff2");
}
@font-face {
  font-family: "Reenie Beanie";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/reenie-beanie-v22-latin-regular.woff2") format("woff2");
}

/* ---------- Design-Tokens ---------- */

:root {
  --white:    #ffffff;
  --grau-hell: #f1f1f0;   /* leiser Wechsel zwischen Abschnitten */
  --grau:     #cfcecc;    /* kraeftiger Akzent, z. B. Zitat-Sektion */
  --dark:     #1a1918;
  --text:     #1a1918;   /* Fließtext: seit 3.9. dieselbe Farbe wie Ueberschriften,
                            weil Raleway Regular duennere Striche hat als Medium */
  --label:    #5c584f;
  --red:      #d35400;
  --gold:     #e4ac00;
  --goldtext: #231a00;
  --line:     #eceae7;
  --text-dunkel: #f4f2ee;
  --text-dunkel-dim: #ccc6bb;

  --schrift-head: "Familjen Grotesk", system-ui, sans-serif;
  --schrift-text: "Raleway", system-ui, sans-serif;
}

/* ---------- Grundlagen ---------- */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--white);
  color: var(--dark);
  font-family: var(--schrift-text);
  /* Regular statt Medium: beim Kopieren von der Seite wandert die
     Schriftstaerke als Formatierung mit, und 500 wird in Word als
     fett interpretiert. Die duenneren Striche gleicht die dunklere
     Textfarbe aus. Auf dunklen Flaechen bleibt es bei 600, dort
     wirkt helle Schrift optisch duenner. */
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* Betonung im Fließtext läuft in Halbfett, nicht in Fett.
   Bei Raleway Regular als Grundstaerke ist der Sprung auf 700 so
   gross, dass das Auge nur noch die fetten Stellen liest. 600 hebt
   deutlich ab, ohne den Lesefluss zu zerreissen.

   Das !important ist hier ausnahmsweise noetig: In den einzelnen
   Seiten steht bei vielen Abschnitten strong { font-weight: 700 },
   und diese Regeln sind spezifischer als diese hier. Betrifft nur
   strong und b - Buttons, Eyebrow, Navigation und Sublines sind
   davon nicht beruehrt und bleiben bei 700. */
strong, b { font-weight: 600 !important; }

/* Einzelne Sätze, die über die normale Betonung hinaus Gewicht
   brauchen - etwa ein Fazit oder ein Merksatz. Sparsam einsetzen,
   sonst verliert die Halbfettung ihre Wirkung.
   Verwendung: <strong class="satt">Text</strong> */
strong.satt, b.satt, .satt strong, .satt b { font-weight: 700 !important; }

h1, h2, h3 {
  font-family: var(--schrift-head);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.04;
  margin: 0;
}

p { margin: 0; line-height: 1.7; }

/* Innerer Bereich, auf allen Seiten gleich.
   1400 statt 1240, damit auf grossen Monitoren nicht so viel Rand
   uebrig bleibt. Lesespalten innerhalb der Abschnitte bleiben schmal. */
.wrap { width: min(calc(100% - 80px), 1400px); margin-inline: auto; }

/* ---------- Kopfbereich ---------- */

header { border-top: 1px solid var(--line); background: var(--white); }
.header-inner { min-height: 100px; display: grid; grid-template-columns: 210px 1fr 180px; align-items: center; gap: 24px; }
.logo img { height: 74px; width: auto; }
/* Nur die Navigation im Kopfbereich. Die Fusszeile hat ein eigenes nav,
   das hier ausdruecklich nicht gemeint ist. */
header nav { display: flex; align-items: center; justify-content: center; gap: 26px; font-size: 15px; font-weight: 600; white-space: nowrap; }
/* Die Kopie des Newsletter-Knopfs im Menue ist nur mobil gedacht */
header nav .newsletter { display: none; }

/* ---------- Aufklappmenue im Kopfbereich ----------
   Ein Knopf statt eines Links, weil dahinter kein Ziel liegt,
   sondern eine Auswahl. Oeffnet per Klick, nicht beim Ueberfahren:
   auf Tablets gibt es kein Ueberfahren. */
.hat { position: relative; }
.hat-schalter { display: inline-flex; align-items: center; gap: 7px;
  padding: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--schrift-text); font-weight: 600; font-size: 15px;
  color: var(--dark); white-space: nowrap; }
.hat-schalter::after { content: ""; width: 7px; height: 7px; margin-top: -3px;
  border-right: 1.6px solid var(--dark); border-bottom: 1.6px solid var(--dark);
  transform: rotate(45deg); transition: transform .18s ease-out; }
.hat.offen .hat-schalter::after { transform: rotate(-135deg); margin-top: 2px; }

.untermenue { display: none; position: absolute; left: 50%; top: calc(100% + 18px);
  transform: translateX(-50%); z-index: 50; min-width: 250px;
  background: var(--white); border: 1px solid var(--line);
  box-shadow: 0 18px 34px rgba(26,25,24,.12); padding: 8px 0; }
.hat.offen .untermenue { display: block; }
.untermenue a { display: block; padding: 12px 22px; font-size: 15px; font-weight: 500; white-space: nowrap; }
.untermenue a:hover { background: var(--grau-hell); }

/* Burger-Knopf: nur auf schmalen Bildschirmen sichtbar.
   Drei Striche, die sich beim Oeffnen zum Kreuz drehen. */
.burger { display: none; width: 46px; height: 46px; padding: 0; border: 0; background: none;
  cursor: pointer; align-items: center; justify-content: center; justify-self: end; }
.burger span { display: block; position: relative; width: 26px; height: 2px;
  background: var(--dark); transition: background .18s ease-out; }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0;
  width: 26px; height: 2px; background: var(--dark);
  transition: transform .22s ease-out, top .22s ease-out; }
.burger span::before { top: -8px; }
.burger span::after  { top: 8px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

.newsletter {
  justify-self: end; background: var(--gold); color: var(--goldtext);
  padding: 14px 26px; border-radius: 5px;
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
}

/* ---------- Wiederkehrende Bausteine ---------- */

/* Eyebrow: kraeftiger als frueher. In Label-Grau und 13px war sie auf
   hellgrauem Grund kaum zu lesen - jetzt in Textfarbe, eine Stufe
   groesser und mit dunklerem Rahmen. */
.eyebrow {
  align-self: flex-start; display: inline-block;
  border: 1px dashed #a9a294; border-radius: 5px; padding: 9px 16px;
  font-family: var(--schrift-text); line-height: 1.4;
  font-size: 14px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700;
  color: var(--dark);
}

.red { color: var(--red); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 34px;
  background: var(--gold); color: var(--goldtext); border-radius: 5px;
  font-size: 13px; letter-spacing: .11em; text-transform: uppercase; font-weight: 700;
  align-self: flex-start;
  transition: transform .15s ease;
}
.btn:hover { transform: translateY(-2px); }

/* Pommestüte in der Textzeile */
.fries { height: .82em; width: auto; vertical-align: -.08em; margin-left: .10em; display: inline-block; }

/* ---------- Kopfbereich mobil ---------- */

@media (max-width: 1240px) {
  .wrap { width: min(calc(100% - 44px), 1400px); }
  .header-inner { grid-template-columns: 150px 1fr 160px; gap: 16px; }
  header nav { gap: 18px; font-size: 14px; }
  .hat-schalter { font-size: 14px; }
  .logo img { height: 60px; }
}
@media (max-width: 820px) {
  .header-inner { min-height: 76px; grid-template-columns: 1fr auto; }
  .logo img { height: 52px; }

  /* Newsletter-Knopf wandert ins aufgeklappte Menue, dafuer kommt der Burger. */
  .header-inner > .newsletter { display: none; }
  .burger { display: inline-flex; }

  /* Menue klappt unter dem Kopfbereich auf, ueber dem restlichen Inhalt.
     Alle Eintraege nehmen die volle Breite ein und stehen linksbuendig -
     sonst haengen die Aufklappmenues links und die uebrigen Punkte mittig. */
  header nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 40;
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
    background: var(--white); border-top: 1px solid var(--line);
    box-shadow: 0 18px 30px rgba(26,25,24,.10);
    padding: 8px 22px 22px;
  }
  header nav.offen { display: flex; }
  header nav a { padding: 16px 2px; font-size: 17px; border-bottom: 1px solid var(--line); }
  header nav a:last-of-type { border-bottom: 0; }
  header nav .newsletter { display: inline-flex; align-items: center; justify-content: center;
    margin-top: 18px; border-bottom: 0; }

  /* Aufklappmenue mobil: keine schwebende Flaeche, sondern eine
     eingerueckte Liste innerhalb des aufgeklappten Menues. */
  .hat { width: 100%; }
  .hat-schalter { width: 100%; justify-content: space-between;
    padding: 16px 2px; font-size: 17px; border-bottom: 1px solid var(--line); }
  .untermenue { position: static; transform: none; min-width: 0;
    border: 0; box-shadow: none; padding: 0 0 0 18px; }
  .untermenue a { font-size: 16px; padding: 14px 2px; }

  header { position: relative; }
}
@media (max-width: 520px) {
  .wrap { width: min(calc(100% - 36px), 1400px); }
  .eyebrow { font-size: 12px; padding: 8px 11px; letter-spacing: .15em; }
  .btn { width: 100%; padding: 0 20px; }
}

/* ---------- Blattlinien auf schmalen Bildschirmen ----------
   Die Linien laufen in den freien Raendern neben der Textspalte.
   Die Textspalte hat eine feste Breite, die Linien sind prozentual
   platziert - wird das Fenster schmaler, waechst der Text also in
   die Linien hinein. Deshalb verschwinden sie ab hier.
   Gilt fuer alle Seiten. */
@media (max-width: 1400px) {
  .blattrand { display: none; }
}

/* Das KlickTipp-Formular steckt in einem eigenen Rahmen mit fester
   Breite (380 Pixel). Auf schmalen Handys passt das nicht mehr in die
   Spalte und die ganze Seite laesst sich seitlich schieben.
   Deshalb: Rahmen darf schrumpfen. Gilt fuer alle Seiten mit Formular. */
.formular iframe,
iframe.ktv2 { max-width: 100% !important; }

/* Die Fusszeile sitzt immer unten, auch wenn der Inhalt kurz ist.
   Ohne diese Regel endet sie bei kurzen Seiten mitten im Fenster
   und darunter bleibt eine leere Flaeche. */
body { min-height: 100vh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }
body > footer { flex: none; }

/* ---------- Fusszeile ---------- */

footer { background: var(--dark); }
.footer-inner {
  min-height: 84px; padding: 26px 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 36px;
}
.footer-copyright { font-size: 13px; color: var(--text-dunkel); white-space: nowrap; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 22px; }
.footer-nav a { font-size: 13px; color: var(--gold); white-space: nowrap; }
.footer-nav a:hover { text-decoration: underline; }
.footer-social { display: flex; gap: 16px; }
.footer-social a { display: inline-flex; color: var(--gold); }
.footer-social a:hover { opacity: .75; }
.footer-social svg { width: 18px; height: 18px; display: block; }

@media (max-width: 700px) {
  .footer-inner { justify-content: center; text-align: center; padding: 30px 0; }
  .footer-nav { justify-content: center; width: 100%; }
}