/* ============================================================
   FINEST — finestnights.de
   Farben und Wortmarke aus dem Finestre-Originallogo.
   ============================================================ */

:root {
  --forest:      #17341E;
  --forest-deep: #0E2013;
  --forest-lift: #1D3F26;
  --gold:        #9D7E3D;
  --gold-lt:     #C2A469;
  --paper:       #EFEAE1;
  --paper-dim:   #A8AC9F;

  --serif: 'Didot', 'Bodoni 72', 'Playfair Display', Georgia, serif;
  --sans:  'Avenir Next', 'Futura', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --pad: clamp(1.5rem, 5vw, 5rem);
  --maxw: 1180px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--forest-deep);
  color: var(--paper);
  font-family: var(--sans);
  font-size: clamp(1rem, .95rem + .3vw, 1.125rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); }

/* ---------- wiederkehrende Bausteine ---------- */

.eyebrow {
  font-size: .72rem; letter-spacing: .4em; text-transform: uppercase;
  color: var(--gold-lt); font-weight: 500;
}

.claim {
  font-family: var(--serif); font-style: italic; color: var(--gold-lt);
  font-size: clamp(1.6rem, 4.5vw, 2.9rem); line-height: 1.25;
}

h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.9rem, 5vw, 3.2rem); line-height: 1.15;
  letter-spacing: -.01em;
}

.rule      { border: 0; border-top: 1px solid var(--gold); opacity: .5; }
.rule-fine { border: 0; border-top: 1px solid var(--paper); opacity: .15; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1.05em 2.4em; border: 1px solid var(--gold);
  font-size: .8rem; letter-spacing: .22em; text-transform: uppercase;
  font-weight: 500; text-decoration: none; color: var(--paper);
  background: transparent; cursor: pointer;
  transition: background .25s ease, color .25s ease;
}
.btn:hover, .btn:focus-visible { background: var(--gold); color: var(--forest-deep); }
.btn--solid { background: var(--gold); color: var(--forest-deep); border-color: var(--gold); }
.btn--solid:hover, .btn--solid:focus-visible { background: var(--gold-lt); border-color: var(--gold-lt); }

section { padding-block: clamp(4.5rem, 11vw, 9rem); }

/* Die Abschnitte lagen frueher in zwei wechselnden Gruentoenen. Der hellere
   (#17341E, das Logogruen) wirkte neben dem Foto olivstichig, deshalb jetzt
   durchgehend der tiefe Ton. Damit die Seite nicht zur Platte wird, trennt
   eine Haarlinie die Abschnitte — leiser als ein Farbwechsel, aber genug. */
.intro, .timeline, .where { border-top: 1px solid rgba(239,234,225,.10); }

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

.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column;
        justify-content: center; padding-block: clamp(4rem, 10vw, 7rem); overflow: hidden; }
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
/* Gerichteter Verlauf: links dunkel genug für die Schrift,
   rechts bleibt das warme Kerzenlicht des Fotos stehen. */
.hero__bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(9,20,13,.95) 0%, rgba(9,20,13,.86) 34%,
                            rgba(9,20,13,.52) 62%, rgba(9,20,13,.34) 100%),
    linear-gradient(to bottom, rgba(9,20,13,.72) 0%, rgba(9,20,13,.10) 28%,
                               rgba(9,20,13,.18) 62%, rgba(14,32,19,.92) 100%);
}
/* Hochkant wird aus dem breiten Bild nur ein schmaler Streifen der Mitte
   ausgeschnitten - dort steht das DJ-Notebook und fuellt das halbe Display.
   Etwas nach links geschoben stehen stattdessen Menge und Leuchter im Bild. */
@media (orientation: portrait) {
  .hero__bg img { object-position: 32% 50%; }
}
/* Der Hero bricht aus der zentrierten Spalte aus. Auf breiten Schirmen
   soll die Wortmarke links stehen und nicht in der Mitte schweben —
   die Abschnitte darunter bleiben bewusst in der schmaleren Spalte. */
.hero .wrap { position: relative; z-index: 1; width: 100%; max-width: 1560px; }

/* Erklaert in zwei Saetzen, worum es geht. Fuer alle, die ueber den
   QR-Code vom Plakat kommen und die Reihe noch nicht kennen. */
.hero__lead {
  margin-top: clamp(1.5rem, 3.2vw, 2.2rem);
  max-width: 46ch;
  font-size: clamp(1rem, .95rem + .35vw, 1.15rem);
  line-height: 1.6;
}
.hero__lead strong { font-weight: 500; }

/* Gemeinsame Breite fuer Wortmarke und die NIGHTS-Zeile darunter.
   Beide muessen exakt gleich breit sein, sonst zerfaellt das Lockup. */
.hero { --wortmarke: min(100%, 620px); }

.lockup { display: block; font-weight: 400; }
.wordmark { display: block; width: var(--wortmarke); }
.wordmark img { width: 100%; height: auto; }

/* Sichtbar nur fuer Screenreader — traegt das Wort, das die
   ausgeblendeten Einzelbuchstaben optisch darstellen. */
.nur-vorlesen {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* FINEST NIGHTS ist die Reihe, "Sounds & Cocktails" die Ausgabe.
   NIGHTS laesst sich nicht aus dem Originallogo schneiden — in "finestre"
   gibt es weder G noch H. Es wird gesetzt, in der Grotesk des Design Codes.
   Die Buchstaben werden per flex auf die Wortmarkenbreite verteilt statt
   per letter-spacing geschaetzt: so sitzt die Kante bei jeder Fenstergroesse. */
.nights {
  display: flex; justify-content: space-between;
  width: var(--wortmarke);
  margin-top: clamp(.3rem, 1vw, .7rem);
  color: var(--gold-lt);
  font-size: clamp(1rem, 3.4vw, 2.25rem);
  font-weight: 400;
  line-height: 1;
}

.ausgabe {
  margin-top: clamp(1rem, 2.4vw, 1.6rem);
  font-size: clamp(.6rem, 1.4vw, .74rem);
  letter-spacing: .34em; text-transform: uppercase;
  color: var(--paper-dim);
}

.hero__facts {
  display: flex; flex-wrap: wrap; gap: clamp(1.2rem, 4vw, 3.2rem);
  margin-top: clamp(2rem, 5vw, 3.4rem);
  font-size: .82rem; letter-spacing: .2em; text-transform: uppercase;
}
.hero__facts strong { display: block; font-weight: 500; font-size: 1.05rem;
                      letter-spacing: .1em; margin-top: .35rem; }
.hero__facts span { color: var(--gold-lt); font-size: .7rem; letter-spacing: .3em; }

.hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: clamp(2.2rem, 5vw, 3.2rem); }

/* Der Hero traegt viel: Lockup aus zwei Zeilen, Ausgabenzeile, Erklaertext,
   fuenf Eckdaten, zwei Knoepfe. Auf flacheren Schirmen muss das enger stehen,
   sonst rutscht „Platz reservieren" unter die Bildkante — also genau der
   Knopf, fuer den die ganze Seite wirbt. Zwei Stufen: Laptop und Telefon. */

@media (max-height: 900px) {
  .hero        { padding-block: clamp(2.5rem, 5vw, 3.5rem); }
  .ausgabe     { margin-top: 1rem; }
  .hero__lead  { margin-top: 1.2rem; }
  .hero__facts { margin-top: 2rem; }
  .hero__cta   { margin-top: 2rem; }
}

@media (max-height: 700px) {
  .hero        { padding-block: clamp(2.2rem, 6vw, 3rem); }
  .hero        { --wortmarke: min(100%, 400px); }   /* greift nur im Querformat */
  .nights      { font-size: clamp(.85rem, 2.4vw, 1.5rem); }
  .ausgabe     { margin-top: .7rem; }
  .hero__lead  { margin-top: 1rem; font-size: .95rem; line-height: 1.5; }
  .hero__facts { margin-top: 1.4rem; }
  .hero__cta   { margin-top: 1.6rem; }
}

/* ---------- Intro ---------- */

.intro { background: var(--forest-deep); }
.intro__grid { display: grid; gap: clamp(2.5rem, 6vw, 5rem);
               grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
               margin-top: clamp(2.8rem, 6vw, 4.5rem); }
.pillar .k { font-size: .68rem; letter-spacing: .34em; text-transform: uppercase;
             color: var(--gold); }
.pillar .n { font-family: var(--serif); font-size: clamp(1.5rem, 3.4vw, 2rem);
             margin-top: .7rem; }
.pillar p  { color: var(--paper-dim); margin-top: .9rem; font-size: .96rem; }

/* ---------- Porträts ---------- */

.people { display: grid; gap: clamp(2rem, 5vw, 3.5rem);
          grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
          margin-top: clamp(2.5rem, 6vw, 4rem); }
.person figure { position: relative; overflow: hidden; background: var(--forest-deep); }
.person img { width: 100%; aspect-ratio: 3/4; object-fit: cover;
              filter: saturate(.9) brightness(.92); }

/* Typografische Kachel statt Porträt — solange kein gutes DJ-Foto vorliegt.
   Bewusste Entscheidung, keine Lücke: der Satz trägt die Stelle allein. */
/* Selektor bewusst spezifischer als „.person figure" — sonst gewinnt dessen
   Flaechenfarbe und der Verlauf hier war wirkungslos. Fiel vorher nicht auf,
   weil der Abschnitt selbst noch heller war als die Kachel. */
.person figure.fig-type {
  aspect-ratio: 3/4; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #16331D, #0E2013);
  border: 1px solid rgba(157,126,61,.45);
  padding: clamp(2rem, 4vw, 3.5rem);
}
.fig-type blockquote {
  font-family: var(--serif); font-style: italic; color: var(--gold-lt);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.35; text-align: center;
}

/* Falls das DJ-Foto doch verwendet wird: Beschnitt auf ihn, Farbe angeglichen. */
.person img.is-snapshot {
  object-position: 74% 38%;
  filter: saturate(.72) contrast(1.06) brightness(.80) sepia(.20) hue-rotate(-8deg);
}
.person figcaption { padding-top: 1.5rem; }
.person .k { font-size: .68rem; letter-spacing: .34em; text-transform: uppercase; color: var(--gold); }
.person .n { font-family: var(--serif); font-size: clamp(1.6rem, 3.6vw, 2.2rem); margin-top: .5rem; }
.person .q { font-family: var(--serif); font-style: italic; color: var(--paper-dim);
             margin-top: .9rem; font-size: 1.08rem; line-height: 1.5; }

/* Beide Portraets sind am Rechner aus echten Vorlagen aufbereitet. Der
   Hinweis gehoert sichtbar an die Bilder, aber leise — er ist eine Fussnote,
   keine Ueberschrift. Bewusst als Text und nicht ins Bild gebrannt: so bleibt
   er scharf, vorlesbar und laesst sich aendern, ohne die Datei anzufassen. */
.person .ki { margin-top: 1rem; font-size: .62rem; letter-spacing: .26em;
              text-transform: uppercase; color: var(--paper-dim); opacity: .75; }

/* ---------- Ablauf ---------- */

.timeline { background: var(--forest-deep); }
.step { display: grid; grid-template-columns: 5.5rem 1fr; gap: clamp(1rem, 3vw, 2.5rem);
        padding-block: clamp(1.6rem, 3.5vw, 2.4rem); border-top: 1px solid rgba(239,234,225,.14); }
.step:last-child { border-bottom: 1px solid rgba(239,234,225,.14); }
.step__t { font-family: var(--serif); font-size: clamp(1.4rem, 3vw, 1.9rem); color: var(--gold-lt); }
.step__h { font-size: 1.06rem; letter-spacing: .02em; }
.step__d { color: var(--paper-dim); margin-top: .4rem; font-size: .95rem; }

/* ---------- Reservierung ---------- */

.reserve__grid { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem);
                 grid-template-columns: minmax(0, 1fr); margin-top: clamp(2.5rem, 5vw, 3.5rem); }
@media (min-width: 860px) { .reserve__grid { grid-template-columns: 1fr 1fr; } }

.form { display: grid; gap: 1.4rem; }
.field { display: grid; gap: .5rem; }
.field label { font-size: .68rem; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); }
.field input, .field select, .field textarea {
  background: transparent; border: 0; border-bottom: 1px solid rgba(239,234,225,.28);
  color: var(--paper); font: inherit; font-size: 1rem; padding: .7rem .2rem;
  border-radius: 0; -webkit-appearance: none; appearance: none;
}
/* Ohne eigenen Pfeil sah das Auswahlfeld aus wie ein Textfeld — niemand
   erkannte, dass da etwas zu waehlen ist. appearance:none nimmt den
   Systempfeil weg, also stellen wir einen eigenen hin. */
.field select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23C2A469' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .2rem center;
  padding-right: 2rem;
  cursor: pointer;
}
.field select option { background: var(--forest-deep); color: var(--paper); }

/* Kurzer Hinweis direkt unter einem Feld — naeher dran als der lange
   Absatz unter dem Knopf, den beim Ausfuellen niemand liest. */
.field__hinweis { font-size: .78rem; color: var(--paper-dim); line-height: 1.5; }
.field__hinweis strong { color: var(--gold-lt); font-weight: 500; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-bottom-color: var(--gold);
}
.field input::placeholder, .field textarea::placeholder { color: rgba(168,172,159,.55); }
.form__note { font-size: .82rem; color: var(--paper-dim); line-height: 1.6; }
.form__note a { color: var(--gold-lt); }

.aside { align-self: start; }
.aside dl { margin-top: 1.8rem; display: grid; gap: 1.4rem; }
.aside dt { font-size: .68rem; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); }
.aside dd { margin-top: .35rem; }
.aside a.tel { text-decoration: none; border-bottom: 1px solid var(--gold); padding-bottom: 2px; }

/* ---------- Anfahrt ---------- */

.where { background: var(--forest-deep); }
.where__grid { display: grid; gap: clamp(2rem, 5vw, 4rem);
               grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
               margin-top: clamp(2.2rem, 5vw, 3.2rem); }
.where .k { font-size: .68rem; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); }
.where p { margin-top: .7rem; color: var(--paper-dim); }
.where strong { color: var(--paper); font-weight: 500; }

/* ---------- Footer ---------- */

footer { padding-block: clamp(3rem, 7vw, 5rem); border-top: 1px solid rgba(239,234,225,.13); }
.foot { display: flex; flex-wrap: wrap; gap: 2rem; align-items: flex-end;
        justify-content: space-between; }
.foot__links { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; font-size: .74rem;
               letter-spacing: .18em; text-transform: uppercase;
               margin-block: -.7rem; }   /* holt die Polsterung unten wieder rein */
/* Die Zeilen waren 20px hoch — auf dem Handy kaum zu treffen, und die vier
   Links liegen dicht beieinander. Polsterung nach oben und unten macht die
   Flaeche gross genug, ohne das Schriftbild zu aendern. */
.foot__links a { color: var(--paper-dim); text-decoration: none;
                 display: inline-flex; align-items: center; min-height: 44px; }
.foot__links a:hover { color: var(--gold-lt); }
.endorse { display: flex; align-items: center; gap: 1rem; }
.endorse span { font-size: .64rem; letter-spacing: .3em; text-transform: uppercase; color: var(--paper-dim); }
.endorse img { height: 46px; width: auto; filter: brightness(0) invert(1); opacity: .7; }

/* ---------- Einwilligung im Formular ---------- */

.check { display: grid; grid-template-columns: auto 1fr; gap: .85rem;
         align-items: start; cursor: pointer; }
.check input { appearance: none; -webkit-appearance: none; margin: 0;
               width: 1.15rem; height: 1.15rem; flex: none; margin-top: .18rem;
               border: 1px solid rgba(239,234,225,.38); background: transparent;
               display: grid; place-content: center; cursor: pointer;
               transition: border-color .2s ease; }
.check input::before {
  content: ''; width: .5rem; height: .5rem; transform: scale(0);
  background: var(--gold); transition: transform .15s ease;
}
.check input:checked { border-color: var(--gold); }
.check input:checked::before { transform: scale(1); }
.check input:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.check span { font-size: .86rem; line-height: 1.55; color: var(--paper-dim); }

/* ---------- Rechtstexte ---------- */

.legal { padding-block: clamp(3.5rem, 9vw, 7rem); }
.legal .wrap { max-width: 760px; }
.legal h1 { font-family: var(--serif); font-weight: 400; margin-top: 1.4rem;
            font-size: clamp(2.1rem, 6vw, 3.4rem); line-height: 1.1; }
.legal h2 { font-size: clamp(1.05rem, 2.2vw, 1.2rem); font-family: var(--sans);
            letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
            margin-top: clamp(2.4rem, 5vw, 3.2rem); }
.legal p  { margin-top: 1rem; color: var(--paper-dim); font-size: .95rem; }
.legal .lead { margin-top: 1.8rem; color: var(--paper); font-size: 1.02rem;
               padding-left: 1.4rem; border-left: 1px solid var(--gold); }
.legal strong { color: var(--paper); font-weight: 500; }
.legal a { color: var(--gold-lt); }
.legal__foot { margin-top: clamp(3rem, 7vw, 4.5rem); padding-top: 1.8rem;
               border-top: 1px solid rgba(239,234,225,.13); font-size: .82rem; }

/* Platzhalter, die vor dem Livegang ersetzt werden müssen.
   Bewusst laut: was hier gelb leuchtet, darf nicht online gehen. */
.tbd { background: #FFE58A; color: #2B2B2B; padding: .1em .45em;
       font-weight: 600; font-size: .93em; }
.tbd-block { border-left: 3px solid #FFE58A; padding-left: 1.2rem; }

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