/* ============================================================
   Gästeportal Brunswiek Living — Look nach Marken-CD.
   Quelle der Wahrheit: assets/brand/brunswiek/tokens.css
   Temperatur-Regel: Portal = WARME Fläche → Küsten-Wash darf als
   Akzent/Fensterlicht leuchten; Tiefsee ist der ruhige Anker.
   (Der Meldeschein bleibt Business = einfarbig, siehe gaesteportal.py.)
   ============================================================ */

:root {
  /* Küsten-Palette */
  --bl-tiefsee:  #1C3A47;
  --bl-meer:     #3F6F9C;
  --bl-tuerkis:  #4F97A1;
  --bl-seegruen: #7CB898;
  --bl-sand:     #D8B878;
  /* Neutrale */
  --bl-muschel:  #F2EFE7;
  --bl-nebel:    #E4E2D8;
  --bl-tinte:    #232520;
  --bl-himmel:   #89A6AE;
  --bl-white:    #ffffff;
  /* Wash (warm, nur Akzent/Rule/Fensterlicht) */
  --bl-wash: linear-gradient(100deg,#3F6F9C 0%,#4F97A1 40%,#7CB898 68%,#D8B878 100%);
  /* Status */
  --bl-frei:   #2E7D4F;
  --bl-belegt: #9C2B2B;
  /* Schrift (Helvetica Now falls vorhanden, sonst CD-Fallback-Kette) */
  --bl-font-display: "Helvetica Now Display","Helvetica Neue",Helvetica,Arial,sans-serif;
  --bl-font-text:    "Helvetica Now Text","Helvetica Neue",Helvetica,Arial,sans-serif;
  --bl-radius: 6px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--bl-font-text); color: var(--bl-tinte);
  background: var(--bl-muschel); font-size: 16px; line-height: 1.5;
}

/* --- Hero: Dämmerungs-Illustration, Kopf hell darauf --- */
.hero {
  background: #16303B url("/static/hero.svg?v=3") center bottom / cover no-repeat;
  min-height: 200px; padding: 16px 20px 0;
}
@media (min-width: 620px) { .hero { min-height: 240px; } }
.kopf { display: flex; align-items: center; gap: 11px; }
.kopf .signet { width: 30px; height: 32px; flex: none;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.35)); }
.marke {
  color: var(--bl-white); text-decoration: none; line-height: 1.02;
  font-family: var(--bl-font-display); text-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.marke .b { display: block; font-weight: 700; font-size: 1.2rem; letter-spacing: .01em; }
.marke .l { display: block; font-weight: 300; font-size: .76rem; letter-spacing: .5em;
            margin-left: 1px; color: #d8e2e4; }

/* --- Bühne: weißes Panel schwebt über dem Hero --- */
.buehne { max-width: 620px; margin: 0 auto; padding: 0 16px 40px; }
.panel {
  background: var(--bl-white); border-radius: 14px;
  box-shadow: 0 10px 34px rgba(22,48,59,.20);
  padding: 24px 22px; margin-top: -46px; position: relative;
}
.panel::before {   /* zarte Wash-Rule als oberer Panel-Akzent */
  content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 3px;
  background: var(--bl-wash); border-radius: 0 0 3px 3px;
}
.fuss {
  max-width: 620px; margin: 0 auto; padding: 16px; color: #6a6f6b;
  font-size: .8rem; text-align: center;
}
.fuss a { color: var(--bl-tuerkis); }

h1 { font-family: var(--bl-font-display); font-weight: 700; font-size: 1.6rem;
     color: var(--bl-tiefsee); margin: .6em 0 .35em; letter-spacing: .005em; }
h1.titel { position: relative; padding-bottom: 12px; }
h1.titel::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 62px; height: 4px; background: var(--bl-wash); border-radius: 2px;
}
h2 { font-family: var(--bl-font-display); font-weight: 500; font-size: 1.2rem;
     color: var(--bl-tiefsee); margin: 1.4em 0 .4em; }
h3 { font-size: 1rem; margin: 1.2em 0 .3em; color: var(--bl-tiefsee); }
.meta { color: var(--bl-meer); font-weight: 500; margin-top: -.2em; }
.hinweis { color: #6a6f6b; font-size: .85rem; margin: .3em 0 .6em; }
.sprachen { text-align: right; font-size: .85rem; margin: 0; }
.sprachen a { color: var(--bl-tuerkis); }
.zurueck { font-size: .9rem; }
.zurueck a { color: var(--bl-tuerkis); text-decoration: none; }
a { color: var(--bl-tuerkis); }

/* Formular/Tor liegen direkt im weißen Panel — .karte nur noch Abstandshalter */
.karte { margin: 6px 0 0; }
.karte-innen {
  background: var(--bl-muschel); border: 1px solid var(--bl-nebel);
  border-radius: var(--bl-radius); padding: 10px 14px; margin: 12px 0;
}
.karte-innen summary { cursor: pointer; font-weight: 500; padding: 4px 0;
                       color: var(--bl-tiefsee); }

label { display: block; margin: 10px 0 2px; font-weight: 500; font-size: .9rem;
        color: var(--bl-tiefsee); }
input, select {
  width: 100%; padding: 10px 12px; margin-top: 4px;
  border: 1px solid var(--bl-nebel); border-radius: var(--bl-radius);
  font-size: 1rem; background: var(--bl-white); font-family: inherit;
  color: var(--bl-tinte);
}
input:focus, select:focus {
  outline: 2px solid var(--bl-tuerkis); border-color: transparent;
}
input[type="file"] { padding: 8px; background: var(--bl-muschel); }
.reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 480px) { .reihe { grid-template-columns: 1fr; gap: 0; } }

fieldset {
  border: 1px solid var(--bl-nebel); border-radius: var(--bl-radius);
  margin: 16px 0; padding: 6px 14px 14px;
}
legend { font-family: var(--bl-font-display); font-weight: 500; font-size: .92rem;
         padding: 0 6px; color: var(--bl-tiefsee); }

canvas#sig {
  width: 100%; height: 150px; background: var(--bl-white);
  border: 1.5px dashed var(--bl-himmel); border-radius: var(--bl-radius);
  touch-action: none;
}

button, .knopf {
  display: inline-block; width: 100%; margin-top: 14px; padding: 13px 18px;
  background: var(--bl-tiefsee); color: var(--bl-white); border: 0;
  border-radius: var(--bl-radius); font-family: var(--bl-font-display);
  font-size: 1.05rem; font-weight: 500; cursor: pointer; text-align: center;
  text-decoration: none; letter-spacing: .01em;
}
button:hover, .knopf:hover { background: var(--bl-meer); }
button:disabled { opacity: .55; }
button.sekundaer {
  background: transparent; color: var(--bl-tuerkis);
  border: 1px solid var(--bl-nebel); width: auto; padding: 7px 12px;
  font-size: .85rem; font-weight: 500; margin-top: 8px;
}
button.sekundaer:hover { background: var(--bl-muschel); }

.fehler {
  background: #f7e7e5; color: var(--bl-belegt); border-radius: var(--bl-radius);
  padding: 10px 14px; font-size: .92rem; border: 1px solid #e8c9c5;
}

ul { padding-left: 1.2em; }
li { margin: .25em 0; }