/* hola-aleman.de - das einzige Stylesheet.
   Farben: Rot und Gelb stehen in der spanischen UND in der deutschen Flagge, deshalb
   tragen sie die Seite. Rot fuehrt, Gelb setzt Akzente, der Hintergrund bleibt warm
   statt weiss. Alle Werte als Token in :root.
   Schriften liegen auf dem eigenen Server (assets/fonts). Absichtlich: ein Abruf bei
   Google Fonts uebertraegt die IP jedes Besuchers dorthin (LG Muenchen I, 20.01.2022,
   3 O 17493/20).
   Cache-Busting: style.css und main.js sind in jeder HTML mit ?v=<datum-n> verlinkt.
   Diesen Wert bei jeder Aenderung an CSS oder JS hochsetzen. */

@font-face {
  font-family: "Playfair Display";
  src: url("../assets/fonts/PlayfairDisplay-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --red: #c8102e;
  --red-dark: #9c0c23;
  --red-soft: #fdecee;
  --yellow: #f5b921;
  --yellow-soft: #fff6e0;
  --ink: #2a1a16;
  --ink-soft: #5e4a44;
  --paper: #fffdf8;
  --paper-alt: #fdf6ea;
  --line: #e9ddcc;
  --white: #ffffff;

  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --gutter: 16px;
  --wrap: 1100px;
  --radius: 14px;
  --shadow: 0 2px 10px rgba(42, 26, 22, .07);
  --shadow-lift: 0 8px 28px rgba(42, 26, 22, .13);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--red); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--red-dark); }

:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: var(--gutter); top: 8px; z-index: 50;
  background: var(--white); padding: .5rem .9rem; border-radius: 8px;
}

/* ---------------- Kopf ---------------- */

.nav {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255, 253, 248, .94);
  backdrop-filter: blur(8px);
  border-bottom: 3px solid var(--yellow);
}
.nav-in {
  max-width: var(--wrap); margin: 0 auto;
  padding: .55rem var(--gutter);
  display: flex; align-items: center; gap: 1rem;
}
.brand {
  font-family: var(--serif); font-size: 1.3rem;
  text-decoration: none; color: var(--ink); white-space: nowrap;
}
.brand-hola { color: var(--red); font-weight: 400; }
.brand-al { color: var(--ink); }
.brand-hola::after { content: " "; }

.nav-links {
  margin-left: auto;
  display: flex; align-items: center; gap: 1.1rem;
  font-size: .95rem;
}
.nav-links > a { color: var(--ink-soft); text-decoration: none; }
.nav-links > a:hover { color: var(--red); }
.nav-cta {
  background: var(--red); color: var(--white) !important;
  padding: .4rem .85rem; border-radius: 999px; font-weight: 600;
}
.nav-cta:hover { background: var(--red-dark); }

.lang { display: flex; gap: .25rem; }
.lang-btn {
  font: inherit; font-size: .82rem; font-weight: 700; letter-spacing: .04em;
  padding: .3rem .5rem; min-width: 2.4rem;
  border: 1.5px solid var(--line); background: var(--white); color: var(--ink-soft);
  border-radius: 8px; cursor: pointer;
}
.lang-btn:hover { border-color: var(--red); color: var(--red); }
.lang-btn[aria-pressed="true"] {
  background: var(--red); border-color: var(--red); color: var(--white);
}

@media (max-width: 760px) {
  .nav-links > a:not(.nav-cta) { display: none; }
  .nav-links { margin-left: auto; gap: .6rem; }

}

/* ---------------- Hero ---------------- */

.hero {
  max-width: var(--wrap); margin: 0 auto;
  padding: 2.5rem var(--gutter) 1rem;
  display: grid; gap: 2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .hero {
    grid-template-columns: 1.15fr .85fr;
    align-items: center;
    padding-top: 3.5rem;
  }
}

.kicker {
  margin: 0 0 .5rem;
  font-size: .8rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--red);
}
.hero-title {
  font-family: var(--serif);
  margin: 0;
  line-height: .98;
  font-size: clamp(2.9rem, 11vw, 4.6rem);
  font-weight: 400;
}
.hero-title .t-hola { color: var(--red); display: block; }
.hero-title .t-al {
  color: var(--ink); display: block;
  background: linear-gradient(transparent 68%, var(--yellow) 68%, var(--yellow) 92%, transparent 92%);
  background-size: 100% 100%;
  width: fit-content;
}
.claim {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 4.2vw, 1.5rem);
  color: var(--ink-soft);
  margin: .9rem 0 0;
}
.hero-lead { margin: 1rem 0 0; max-width: 34em; }

.hero-btns {
  display: flex; flex-wrap: wrap; gap: .7rem;
  margin: 1.6rem 0 0;
}
.btn {
  display: inline-block; text-decoration: none; font: inherit; font-weight: 600;
  padding: .72rem 1.3rem; border-radius: 999px; border: 2px solid transparent;
  cursor: pointer; text-align: center;
}
.btn-main {
  background: var(--red); color: var(--white);
  box-shadow: var(--shadow);
}
.btn-main:hover { background: var(--red-dark); color: var(--white); box-shadow: var(--shadow-lift); }
.btn-ghost { border-color: var(--line); color: var(--ink); background: var(--white); }
.btn-ghost:hover { border-color: var(--red); color: var(--red); }

.hero-img { position: relative; }
.hero-img img {
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  width: 100%;
}
.hero-img::after {
  content: "";
  position: absolute; inset: auto -10px -10px auto;
  width: 60%; height: 55%;
  background: var(--yellow);
  border-radius: var(--radius);
  z-index: -1;
}

/* ---------------- Baender ---------------- */

.band { padding: 2.8rem 0; }
.band-alt { background: var(--paper-alt); border-block: 1px solid var(--line); }
.band-price { background: var(--red-soft); border-block: 1px solid #f3d7da; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-narrow { max-width: 720px; }

h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.7rem, 5.6vw, 2.3rem);
  line-height: 1.15;
  margin: 0 0 .6rem;
}
h2::after {
  content: ""; display: block;
  width: 3rem; height: 4px; margin-top: .6rem;
  background: var(--yellow); border-radius: 2px;
}
h3 { font-size: 1.08rem; margin: 0 0 .35rem; }

.lead { font-size: 1.18rem; color: var(--red-dark); margin: .8rem 0 0; font-weight: 500; }
.prose { max-width: 42em; margin: .8rem 0 0; }
.note {
  margin: 1.4rem 0 0; padding: .85rem 1rem;
  background: var(--yellow-soft); border-left: 4px solid var(--yellow);
  border-radius: 0 8px 8px 0;
  font-size: .97rem;
  max-width: 44em;
}

/* Karten "Was das ist" */
.cards {
  list-style: none; margin: 1.8rem 0 0; padding: 0;
  display: grid; gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 620px) { .cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .cards { grid-template-columns: repeat(4, 1fr); } }
.card {
  background: var(--white); border: 1px solid var(--line);
  border-top: 4px solid var(--red);
  border-radius: var(--radius); padding: 1.1rem;
  box-shadow: var(--shadow);
}
.card:nth-child(2n) { border-top-color: var(--yellow); }
.card p { margin: 0; font-size: .98rem; color: var(--ink-soft); }

/* Ablauf */
.how-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .how-grid { grid-template-columns: 1.3fr .7fr; align-items: start; } }

.steps { list-style: none; counter-reset: s; margin: 1.6rem 0 0; padding: 0; }
.steps > li {
  position: relative; padding: 0 0 1.4rem 3.2rem;
  border-left: 2px solid var(--line); margin-left: 1.1rem;
}
.steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.step-n {
  position: absolute; left: -1.15rem; top: 0;
  width: 2.3rem; height: 2.3rem;
  display: grid; place-items: center;
  background: var(--red); color: var(--white);
  border-radius: 50%; font-weight: 700; font-size: .95rem;
  box-shadow: 0 0 0 5px var(--paper-alt);
}
.steps > li:nth-child(2n) .step-n { background: var(--yellow); color: var(--ink); }
.steps p { margin: 0; color: var(--ink-soft); font-size: .98rem; }

.how-img img, .where-img img {
  border-radius: var(--radius); box-shadow: var(--shadow-lift);
  aspect-ratio: 3 / 4; object-fit: cover; width: 100%;
}
.how-img, .where-img { margin: 0; }

/* Passt / passt nicht */
.fit {
  display: grid; gap: 1rem; margin: 1.8rem 0 0;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .fit { grid-template-columns: 1fr 1fr; } }
.fit > div {
  border-radius: var(--radius); padding: 1.1rem 1.2rem;
  border: 1px solid var(--line); background: var(--white);
}
.fit-yes { border-left: 5px solid var(--red); }
.fit-no { border-left: 5px solid var(--line); background: var(--paper-alt); }
.fit ul { margin: .5rem 0 0; padding-left: 1.2rem; }
.fit li { margin: .3rem 0; color: var(--ink-soft); }
.fit-yes li::marker { color: var(--red); }

/* Ort und Zeit */
.where-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .where-grid { grid-template-columns: 1.3fr .7fr; align-items: start; } }

.facts { margin: 1.6rem 0 0; }
.facts dt {
  font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--red); margin-top: 1.1rem;
}
.facts dd { margin: .2rem 0 0; }
.facts dd:first-of-type { font-size: 1.1rem; font-weight: 600; }
.pending {
  display: inline-block; font-weight: 600;
  background: var(--yellow); color: var(--ink);
  padding: .1rem .5rem; border-radius: 6px; font-size: .95rem;
}
.dd-text { display: block; margin-top: .4rem; color: var(--ink-soft); font-size: .98rem; }

/* Preis */
.price-now {
  font-family: var(--serif); font-size: clamp(1.5rem, 5vw, 2rem);
  color: var(--red-dark); margin: 1rem 0 0;
}
.later {
  margin: 1.6rem 0 0; padding: 1.1rem 1.2rem;
  background: var(--white); border: 1px solid #f3d7da; border-radius: var(--radius);
  max-width: 44em;
}
.later p { margin: 0; color: var(--ink-soft); font-size: .98rem; }

/* ---------------- Formular ---------------- */

.form { margin: 1.8rem 0 0; }
.field { margin: 0 0 1.1rem; }
.field > label {
  display: block; font-weight: 600; font-size: .95rem; margin-bottom: .3rem;
}
.field input[type="text"], .field input[type="email"], .field input[type="tel"],
.field select, .field textarea {
  font: inherit; width: 100%;
  padding: .62rem .75rem;
  border: 1.5px solid var(--line); border-radius: 10px;
  background: var(--white); color: var(--ink);
}
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--red); outline: none;
  box-shadow: 0 0 0 3px var(--red-soft);
}
.hint, .err { display: block; font-size: .87rem; margin-top: .3rem; }
.hint { color: var(--ink-soft); }
.err { color: var(--red-dark); font-weight: 600; }
.err:empty { display: none; }
.field-invalid input, .field-invalid select, .field-invalid textarea { border-color: var(--red); }

.field-check {
  display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start;
}
.field-check input { width: 1.15rem; height: 1.15rem; margin-top: .25rem; accent-color: var(--red); }
.field-check > label { font-weight: 400; font-size: .95rem; margin: 0; }
.field-check .err { grid-column: 2; }

/* Honigtopf: aus dem Blickfeld, aber nicht display:none - manche Bots pruefen das. */
.hp {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

.form-send { margin: 1.5rem 0 0; }
.form-msg {
  margin: 1.2rem 0 0; padding: .95rem 1.1rem; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--white);
}
.form-msg h3 { margin: 0 0 .2rem; }
.form-msg p { margin: 0; font-size: .98rem; }
.form-msg.ok { border-left: 5px solid var(--red); background: var(--red-soft); }
.form-msg.bad { border-left: 5px solid var(--yellow); background: var(--yellow-soft); }

/* ---------------- Kontakt ---------------- */

.contact-list { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.contact-list li {
  display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: baseline;
  padding: .8rem 0; border-bottom: 1px solid var(--line);
}
.c-label {
  font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--red); min-width: 7rem;
}
.contact-list a { font-weight: 600; word-break: break-word; }

/* ---------------- Fuss ---------------- */

.foot {
  background: var(--ink); color: #f3e7e0;
  padding: 2rem 0; margin-top: 0;
  border-top: 4px solid var(--yellow);
}
.foot-in {
  display: flex; flex-wrap: wrap; gap: .8rem 2rem;
  align-items: center; justify-content: space-between;
}
.foot-note { margin: 0; font-size: .92rem; color: #cbb8b0; }
.foot-links { display: flex; flex-wrap: wrap; gap: 1.2rem; font-size: .92rem; }
.foot-links a { color: #f3e7e0; }
.foot-links a:hover { color: var(--yellow); }

.nojs {
  max-width: var(--wrap); margin: 1rem auto; padding: 1rem var(--gutter);
  background: var(--yellow-soft); border-left: 4px solid var(--yellow);
}
.nojs h2 { font-size: 1.2rem; }
.nojs h2::after { display: none; }

/* ---------------- Impressum, 404 ---------------- */

.page { max-width: 760px; margin: 0 auto; padding: 2.5rem var(--gutter) 3rem; }
.page h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.9rem, 6vw, 2.5rem); margin: .5rem 0 1.5rem;
}
.page h2 { font-size: 1.35rem; margin-top: 2.2rem; }
.page h3 { margin-top: 1.5rem; }
.page address { font-style: normal; margin: .4rem 0 0; }
.back { font-size: .95rem; font-weight: 600; text-decoration: none; }
.back::before { content: "\2190\00a0"; }
.small { font-size: .9rem; color: var(--ink-soft); }

.credits { list-style: none; padding: 0; margin: 1rem 0 0; }
.credits li {
  padding: .7rem 0; border-bottom: 1px solid var(--line); font-size: .93rem;
}
.credits strong { display: block; }

.center { text-align: center; }
.e404 { padding: 4rem var(--gutter); }



/* ---------------- Der WhatsApp-Abschnitt ----------------
   Das Band liegt im warmen Gelb und hebt sich damit von den uebrigen ab, ohne die
   Farbwelt zu verlassen. Einzige Ausnahme ist der Beitrittsknopf: er traegt das Gruen
   von WhatsApp, weil hier die Wiedererkennung der Plattform die Funktion ist und nicht
   die Gestaltung. Kein Logo - ein Wortlaut genuegt und wirft keine Markenfragen auf. */
.band-wa {
  background: var(--yellow-soft);
  border-block: 1px solid #f0e0b8;
}

.wa-cta { margin: 1.6rem 0 0; }

.btn-wa {
  background: #1f8f4e;
  color: var(--white);
  box-shadow: var(--shadow);
  font-size: 1.05rem;
  padding: .8rem 1.6rem;
}
.btn-wa:hover { background: #17703d; color: var(--white); box-shadow: var(--shadow-lift); }

/* Drei Karten statt vier: bei 980 px sonst eine einzelne in der zweiten Reihe. */
@media (min-width: 980px) {
  .cards-3 { grid-template-columns: repeat(3, 1fr); }
}
.band-wa .card { border-top-color: #1f8f4e; }
.band-wa .card:nth-child(2n) { border-top-color: var(--yellow); }

/* Was mit der Telefonnummer passiert, steht ruhig und vollstaendig da - nicht als
   Kleingedrucktes. Wer zu einem Messenger eingeladen wird, soll vorher wissen, wer
   seine Nummer sieht. */
/* Hinweis unter dem Beitrittsknopf, solange der Gruppenlink nicht oeffentlich ist. */
.wa-hint {
  max-width: 46rem;
  margin: 0.6rem auto 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-soft);
  text-align: center;
}

.wa-privacy {
  margin: 1.8rem 0 0;
  padding: 1.1rem 1.2rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 5px solid #1f8f4e;
  border-radius: var(--radius);
  max-width: 44em;
}
.wa-privacy h3 { margin-bottom: .3rem; }
.wa-privacy p { margin: 0; color: var(--ink-soft); font-size: .98rem; }

.band-wa .note strong { display: block; margin-bottom: .2rem; }

/* ---------------- Tippflaechen auf dem Handy ----------------
   Dieser Block steht bewusst GANZ AM ENDE. Eine Media-Query hebt die Spezifitaet
   nicht an: steht sie vor einer gleich spezifischen Regel, gewinnt die spaetere.
   Genau das ist am 12.11.2026 passiert - die Checkbox blieb bei 1.15rem (18 px),
   weil ihre Desktop-Regel weiter unten stand als die mobile Korrektur.

   Gemessen bei 375 px Breite: Sprachknoepfe 33 px, Anmelden-Knopf 38 px,
   Checkbox 18 px. Apple nennt 44 px als Mindestmass fuer ein Tippziel, Google 48 dp. */
@media (max-width: 760px) {
  .lang-btn { min-height: 44px; padding-inline: .6rem; }
  .nav-cta { min-height: 44px; display: inline-flex; align-items: center; }
  .btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }
  .field-check input { width: 1.6rem; height: 1.6rem; margin-top: .1rem; }
  .field-check > label { padding-block: .2rem; }
  .contact-list a, .foot-links a { padding-block: .35rem; display: inline-block; }
}