/* Reiseplaner – gemeinsames Stylesheet.
   Palette und Typografie folgen der bestehenden Wales-Webseite:
   Walisisch-Rot (dragon), Messing (brass), Themse-Blau (thames) auf warmem Grund. */

:root {
  --ground:#E7E6DB; --panel:#F2F1EA; --ink:#1E252C; --ink-soft:#4C5560; --ink-faint:#707A84;
  --slate:#3A4550; --dragon:#A32530; --brass:#7A601F; --thames:#2F5D6E; --line:#C6C4B4; --chip:#DEDDD0;
  --ok:#2E6B3E;
  --display:'Hoefler Text','Baskerville','Palatino Linotype',Palatino,Georgia,serif;
  --body:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}
/* Dunkelmodus: gedaempfte Texte bewusst hell fuer hohen Kontrast */
@media (prefers-color-scheme: dark) {
  :root { --ground:#171C22; --panel:#212832; --ink:#EFF1ED; --ink-soft:#CDD4DC; --ink-faint:#ACB8C4;
    --slate:#AEBCCA; --dragon:#E86A73; --brass:#D4B066; --thames:#93C2D3; --line:#414C59; --chip:#2E3742;
    --ok:#84CD98; }
}
:root[data-theme="dark"] { --ground:#171C22; --panel:#212832; --ink:#EFF1ED; --ink-soft:#CDD4DC; --ink-faint:#ACB8C4;
  --slate:#AEBCCA; --dragon:#E86A73; --brass:#D4B066; --thames:#93C2D3; --line:#414C59; --chip:#2E3742; --ok:#84CD98; }
:root[data-theme="light"] { --ground:#E7E6DB; --panel:#F2F1EA; --ink:#1E252C; --ink-soft:#4C5560; --ink-faint:#707A84;
  --slate:#3A4550; --dragon:#A32530; --brass:#7A601F; --thames:#2F5D6E; --line:#C6C4B4; --chip:#DEDDD0; --ok:#2E6B3E; }

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { background:var(--ground); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.6;
       margin:0; -webkit-font-smoothing:antialiased; }
.wrap { max-width:1000px; margin:0 auto; padding:clamp(16px,4vw,40px) clamp(14px,4vw,36px) 88px; }
a { color:inherit; }
:focus-visible { outline:2px solid var(--dragon); outline-offset:3px; border-radius:2px; }
button { font:inherit; cursor:pointer; }
.laden { color:var(--ink-faint); }

/* ---------- Topbar ---------- */
.topbar { position:sticky; top:0; z-index:30; background:var(--panel); border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:8px; padding:9px clamp(14px,3vw,24px);
  padding-top:calc(9px + env(safe-area-inset-top)); flex-wrap:wrap; }
.brand { font-family:var(--display); font-size:1.15rem; text-decoration:none; letter-spacing:.01em; }
.brand b { color:var(--dragon); font-weight:600; }
.topnav { display:flex; gap:4px; margin-left:auto; align-items:center; flex-wrap:wrap; }
.topnav a, .topnav button { font-size:.82rem; font-weight:600; letter-spacing:.02em; text-decoration:none;
  padding:6px 11px; border:1px solid transparent; background:none; color:var(--ink-soft); border-radius:2px; }
.topnav a:hover, .topnav button:hover { color:var(--dragon); }
.topnav a.akt { border-color:var(--line); background:var(--ground); color:var(--ink); }
.topmail { font-size:.75rem; color:var(--ink-faint); max-width:34vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---------- Typografie / Kopf ---------- */
.eyebrow { font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--dragon); font-weight:600; }
h1 { font-family:var(--display); font-weight:400; font-size:clamp(1.7rem,5.2vw,3rem); line-height:1.08;
     letter-spacing:-.015em; text-wrap:balance; margin:.2em 0; }
h1 em { font-style:italic; color:var(--slate); }
.standfirst { font-family:var(--display); font-size:clamp(1rem,2vw,1.14rem); line-height:1.5;
              color:var(--ink-soft); max-width:62ch; margin:0; }
h2 { font-family:var(--display); font-weight:400; font-size:1.5rem; margin:0 0 6px; letter-spacing:-.01em; }
.sub { color:var(--ink-soft); font-size:.92rem; margin:0 0 16px; max-width:68ch; }
section { padding-top:36px; }
header.kopf { display:flex; flex-direction:column; gap:13px; padding-bottom:22px; border-bottom:1px solid var(--line); }

.facts { display:flex; flex-wrap:wrap; gap:6px 0; margin:2px 0 0; padding:0; }
.fact { padding-right:18px; margin-right:18px; border-right:1px solid var(--line); }
.fact:last-child { border-right:0; margin-right:0; padding-right:0; }
.fact dt { font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); font-weight:600; margin-bottom:3px; }
.fact dd { margin:0; font-size:1rem; font-weight:600; font-variant-numeric:tabular-nums; }

/* ---------- Eckdaten ---------- */
.booked { display:grid; grid-template-columns:1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:2px; }
@media (min-width:620px) { .booked { grid-template-columns:repeat(2,1fr); } }
@media (min-width:900px) { .booked { grid-template-columns:repeat(4,1fr); } }
.bk { background:var(--panel); padding:13px 15px; display:flex; flex-direction:column; gap:4px; }
.bkk { font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--dragon); font-weight:700; }
.bkv { font-size:.9rem; font-weight:600; line-height:1.45; }
.bkv em { font-weight:400; font-style:italic; color:var(--ink-faint); font-size:.86em; display:block; }

/* ---------- Toolbar & Buttons ---------- */
.toolbar { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.btn { font-size:.8rem; font-weight:600; letter-spacing:.03em; padding:8px 14px;
  border:1px solid var(--line); background:var(--panel); color:var(--ink-soft); border-radius:2px; text-decoration:none; display:inline-block; }
.btn:hover { color:var(--dragon); border-color:var(--dragon); }
.btn.primaer { background:var(--dragon); border-color:var(--dragon); color:#fff; }
.btn.primaer:hover { opacity:.87; color:#fff; }
.btn.gefahr { color:var(--dragon); }
.btn.klein { padding:4px 9px; font-size:.74rem; }
.btn:disabled { opacity:.5; cursor:default; }

/* ---------- Tageskarten (Reiseansicht) ---------- */
.days { display:flex; flex-direction:column; gap:12px; }
.day { background:var(--panel); border:1px solid var(--line); border-radius:2px; padding:15px 16px; }
.day.heute { border-color:var(--dragon); box-shadow:0 0 0 1px var(--dragon); }
.dhead { display:grid; grid-template-columns:34px 1fr auto; gap:12px; align-items:baseline; }
.dnum { font-family:var(--display); font-size:1.5rem; color:var(--dragon); font-variant-numeric:tabular-nums; line-height:1; }
.dtitles { min-width:0; }
.ddate { display:block; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); font-weight:600; margin-bottom:2px; }
.dtitle { font-weight:600; font-size:1.02rem; text-wrap:balance; }
.heutebadge { display:inline-block; margin-left:8px; font-size:9px; letter-spacing:.12em; text-transform:uppercase;
  background:var(--dragon); color:#fff; font-weight:700; padding:2px 7px; border-radius:2px; vertical-align:2px; }
.dkm { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.dkm b { display:block; font-size:.93rem; font-weight:700; }
.dkm b.far { color:var(--dragon); }
.dkm2 { display:block; font-size:.74rem; color:var(--ink-faint); }
.droute { margin-top:9px; font-size:.86rem; color:var(--ink-soft); overflow-wrap:anywhere; }
.droute .arr { color:var(--dragon); font-weight:700; padding:0 3px; }
.mapsrow { display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; margin-top:11px; }
a.mapsbtn { display:inline-block; text-decoration:none; font-size:.82rem; font-weight:700; letter-spacing:.02em;
  padding:10px 17px; border-radius:2px; background:var(--dragon); color:#fff; white-space:nowrap; border:1px solid var(--dragon); }
a.mapsbtn.ghost { background:transparent; color:var(--dragon); }
a.mapsbtn:hover { opacity:.85; }
.wpn { font-size:.75rem; color:var(--ink-faint); font-variant-numeric:tabular-nums; }
.warnbox { margin-top:10px; padding:9px 13px; border-left:3px solid var(--dragon);
  background:color-mix(in srgb,var(--dragon) 8%,transparent); font-size:.83rem; color:var(--ink-soft); }
.wx { margin-top:9px; font-size:.8rem; color:var(--ink-soft); }
.wx .wxi { margin-right:4px; }
.dhotel { margin-top:9px; font-size:.86rem; color:var(--ink-soft); display:flex; flex-wrap:wrap; gap:5px; align-items:baseline; }
.dhotel b { color:var(--ink); font-weight:600; }
.dhotel .gebucht { color:var(--ok); font-weight:700; }
.dhotel-ikon { flex:none; }

details.dets { margin-top:12px; border-top:1px solid var(--line); padding-top:10px; }
details.dets > summary { cursor:pointer; font-size:.8rem; font-weight:600; letter-spacing:.02em; color:var(--ink-faint); list-style:none; }
details.dets > summary::-webkit-details-marker { display:none; }
details.dets > summary::before { content:"► "; color:var(--dragon); font-size:.7em; }
details.dets[open] > summary::before { content:"▼ "; }
details.dets > summary:hover { color:var(--dragon); }
.detsbody { padding-top:8px; }
.dnote { font-size:.86rem; color:var(--ink-soft); line-height:1.58; max-width:72ch; margin:0 0 12px; white-space:pre-line; }

.st { padding:9px 0; border-bottom:1px dotted var(--line); }
.st:last-child { border-bottom:0; }
.st.opt { opacity:.82; }
.st.done .stname { text-decoration:line-through; text-decoration-color:var(--dragon); color:var(--ink-faint); }
.sh { font-weight:600; font-size:.92rem; display:flex; flex-wrap:wrap; gap:7px; align-items:center; }
.sh input[type=checkbox] { width:17px; height:17px; accent-color:var(--dragon); margin:0; }
.st p { margin:3px 0 0 0; font-size:.85rem; color:var(--ink-soft); line-height:1.55; max-width:72ch; }
.stnav { font-size:.74rem; font-weight:700; color:var(--thames); text-decoration:none; white-space:nowrap; }
.stnav:hover { text-decoration:underline; }
.bd { font-size:9px; letter-spacing:.11em; text-transform:uppercase; font-weight:700; padding:3px 7px; border-radius:2px; white-space:nowrap; }
.bd.core { background:color-mix(in srgb,var(--brass) 20%,transparent); color:var(--brass); }
.bd.voll { background:color-mix(in srgb,var(--thames) 20%,transparent); color:var(--thames); }
.bd.opt { background:var(--chip); color:var(--ink-soft); }
.bd.km { background:var(--chip); color:var(--ink-soft); }

/* Routen-Auswahl direkt am Ziel (nur Eigentuemer) */
select.routewahl { width:auto; font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  padding:3px 22px 3px 8px; border-radius:2px; border:1px solid transparent; cursor:pointer;
  background:var(--chip); color:var(--ink-soft);
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6'%3E%3Cpath d='M0 0l4 6 4-6z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 6px center; }
select.routewahl.core { background-color:color-mix(in srgb,var(--brass) 20%,var(--panel)); color:var(--brass); }
select.routewahl.voll { background-color:color-mix(in srgb,var(--thames) 20%,var(--panel)); color:var(--thames); }
select.routewahl:hover { border-color:var(--dragon); }
.nur-druck { display:none; }
@media print { .nur-druck { display:inline-block; } select.routewahl { display:none; } }

/* ---------- Übernachtungen ---------- */
.nights { display:grid; grid-template-columns:1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:2px; }
@media (min-width:640px) { .nights { grid-template-columns:repeat(3,1fr); } }
.night { background:var(--panel); padding:11px 14px; font-size:.85rem; }
.night b { display:block; font-size:.9rem; }
.night span { color:var(--ink-soft); font-size:.8rem; }
.night .nhotel { display:block; color:var(--ink); font-weight:600; font-size:.84rem; }
.night.warn span { color:var(--dragon); font-weight:600; }
.night.ok span { color:var(--ok); font-weight:600; }
.nnum { color:var(--ink-faint); font-variant-numeric:tabular-nums; margin-right:6px; }

/* ---------- Notiz-Abschnitte ---------- */
.notes { display:grid; grid-template-columns:1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:2px; }
@media (min-width:700px) { .notes { grid-template-columns:repeat(3,1fr); } }
.note { background:var(--panel); padding:16px; }
.note h4 { font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--dragon); font-weight:700; margin:0 0 8px; }
.note p { margin:0; font-size:.86rem; color:var(--ink-soft); line-height:1.58; }

footer.fuss { margin-top:40px; padding-top:16px; border-top:1px solid var(--line); font-size:.8rem; color:var(--ink-faint); line-height:1.65; white-space:pre-line; }

/* ---------- Karten/Listen (Reiseliste) ---------- */
.cards { display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:700px) { .cards { grid-template-columns:1fr 1fr; } }
.card { background:var(--panel); border:1px solid var(--line); border-radius:2px; padding:16px 18px; display:flex; flex-direction:column; gap:9px; }
.card h3 { font-family:var(--display); font-weight:500; font-size:1.2rem; margin:0; }
.card .meta { font-size:.78rem; color:var(--ink-faint); }
.card .aktionen { display:flex; flex-wrap:wrap; gap:7px; margin-top:auto; }
.leer { border:1px dashed var(--line); border-radius:2px; padding:28px 20px; text-align:center; color:var(--ink-soft); }

/* ---------- Formulare ---------- */
.feld { display:flex; flex-direction:column; gap:4px; margin-bottom:12px; }
.feld > span { font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); font-weight:600; }
input[type=text], input[type=email], input[type=number], input[type=date], select, textarea {
  font:inherit; font-size:.92rem; color:var(--ink); background:var(--ground); border:1px solid var(--line);
  border-radius:2px; padding:9px 11px; width:100%; }
textarea { min-height:72px; resize:vertical; }
input:focus, select:focus, textarea:focus { outline:2px solid var(--dragon); outline-offset:0; border-color:var(--dragon); }
label.check { display:flex; gap:9px; align-items:flex-start; font-size:.86rem; color:var(--ink-soft); cursor:pointer; }
label.check input { width:17px; height:17px; accent-color:var(--dragon); margin-top:2px; flex:none; }
.hinweis { font-size:.8rem; color:var(--ink-faint); }
.fehler { color:var(--dragon); font-size:.86rem; margin:8px 0; font-weight:600; }
.okmsg { color:var(--ok); font-size:.86rem; margin:8px 0; font-weight:600; }
.anmeldebox { max-width:430px; margin:8vh auto 0; background:var(--panel); border:1px solid var(--line); border-radius:2px; padding:26px; }
.anmeldebox h1 { font-size:1.7rem; }
.codefeld { font-variant-numeric:tabular-nums; letter-spacing:.35em; font-size:1.3rem !important; text-align:center; }

/* ---------- Editor ---------- */
.ed-leiste { position:sticky; top:49px; z-index:20; background:var(--ground); border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:9px; flex-wrap:wrap; padding:9px 0; margin-bottom:6px; }
.ed-status { font-size:.78rem; color:var(--ink-faint); margin-left:auto; }
.ed-status.dirty { color:var(--brass); }
.ed-status.err { color:var(--dragon); font-weight:700; }
.ed-block { background:var(--panel); border:1px solid var(--line); border-radius:2px; padding:15px 16px; margin-bottom:14px; }
.ed-block > h3 { margin:0 0 12px; font-family:var(--display); font-weight:500; font-size:1.15rem; }
.ed-zeile { display:grid; gap:9px; margin-bottom:9px; }
.ed-zeile.z2 { grid-template-columns:1fr 1fr; }
.ed-zeile.z3 { grid-template-columns:1fr 1fr 1fr; }
.ed-zeile.z4 { grid-template-columns:2fr 1fr 1fr 1fr; }
.ed-zeile.z5 { grid-template-columns:1fr 1.3fr 1.3fr .9fr auto; }
@media (max-width:640px) { .ed-zeile.z3, .ed-zeile.z4, .ed-zeile.z5 { grid-template-columns:1fr 1fr; } }
.ed-stop { border:1px solid var(--line); border-radius:2px; padding:11px; margin-bottom:9px; background:var(--ground); }
.ed-stop-kopf { display:flex; gap:7px; align-items:center; margin-bottom:8px; }
.ed-stop-kopf input { flex:1; }
.ed-mini { display:flex; gap:5px; }
.ed-mini button { border:1px solid var(--line); background:var(--panel); color:var(--ink-soft); border-radius:2px;
  width:32px; height:32px; font-size:.85rem; line-height:1; flex:none; }
.ed-mini button:hover { color:var(--dragon); border-color:var(--dragon); }
.ed-day { border:1px solid var(--line); border-left:3px solid var(--dragon); border-radius:2px; background:var(--panel); margin-bottom:14px; }
.ed-day > summary { cursor:pointer; list-style:none; display:flex; gap:10px; align-items:baseline; padding:13px 15px; flex-wrap:wrap; }
.ed-day > summary::-webkit-details-marker { display:none; }
.ed-day > summary .dnum { font-size:1.25rem; }
.ed-day > summary .zsm { font-weight:600; }
.ed-day > summary .meta { font-size:.76rem; color:var(--ink-faint); margin-left:auto; }
.ed-day-body { padding:0 15px 15px; }
.teilenlink { font-size:.82rem; word-break:break-all; background:var(--ground); border:1px dashed var(--line); padding:9px 11px; border-radius:2px; }
.teilenlink.klein { font-size:.72rem; padding:6px 9px; color:var(--ink-soft); }
.card-teilen { border-top:1px dashed var(--line); padding-top:10px; margin-top:2px; display:flex; flex-direction:column; gap:7px; }
.card-teilen .aktionen { margin-top:0; align-items:center; }
.card-teilen .meta { font-size:.74rem; }

/* ---------- KI-Assistent (Chat) ---------- */
.chat-rahmen { margin-top:20px; }
.chat { background:var(--panel); border:1px solid var(--line); border-radius:2px; padding:14px;
  min-height:40vh; max-height:60vh; overflow-y:auto; display:flex; flex-direction:column; gap:10px; }
.chat-leer { margin:auto; text-align:center; color:var(--ink-soft); }
.msg { display:flex; flex-direction:column; max-width:85%; }
.msg.user { align-self:flex-end; align-items:flex-end; }
.msg.ki { align-self:flex-start; align-items:flex-start; }
.msg-inhalt { padding:9px 13px; border-radius:2px; font-size:.92rem; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }
.msg.user .msg-inhalt { background:var(--dragon); color:#fff; }
.msg.ki .msg-inhalt { background:var(--ground); border:1px solid var(--line); }
.msg-inhalt.tippt { color:var(--ink-soft); font-style:italic; display:flex; align-items:center; gap:10px; }

/* Claude-Spark: rotiert langsam, pulsiert dabei */
.ki-spark { display:inline-flex; width:22px; height:22px; color:#D97757; flex:none;
  animation:spark-drehen 3.2s linear infinite; }
.ki-spark svg { width:100%; height:100%; animation:spark-pulsieren 1.1s ease-in-out infinite; }
@keyframes spark-drehen { to { transform:rotate(360deg); } }
@keyframes spark-pulsieren { 0%,100% { transform:scale(.78); opacity:.7; } 50% { transform:scale(1.1); opacity:1; } }
.msg-aktionen { display:flex; gap:7px; margin-top:7px; }
.chat-eingabe { display:flex; gap:8px; margin-top:10px; align-items:flex-end; }
.chat-eingabe textarea { flex:1; }
.chat-eingabe .btn { padding:11px 18px; flex:none; }

/* ---------- KI-Aenderungszusammenfassung ---------- */
.ki-zusammenfassung { border-left:3px solid var(--ok); background:color-mix(in srgb,var(--ok) 9%,transparent);
  padding:11px 14px; margin-bottom:14px; border-radius:2px; }
.ki-zusammenfassung b { display:block; font-size:.86rem; color:var(--ok); margin-bottom:6px; }
.ki-zusammenfassung p { margin:0 0 9px; font-size:.88rem; color:var(--ink); white-space:pre-line; line-height:1.6; }

/* ---------- Tabellen (Konto) ---------- */
table.liste { width:100%; border-collapse:collapse; font-size:.85rem; }
table.liste th, table.liste td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); }
table.liste th { font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); }
.tabelle-scroll { overflow-x:auto; }

/* ---------- Druck ---------- */
@media print {
  .topbar, .toolbar, .ed-leiste, .stnav, .sh input[type=checkbox], .no-print { display:none !important; }
  body { background:#fff; color:#000; }
  .day, .note, .bk, .night { break-inside:avoid; }
  a.mapsbtn { display:none; }
  .wrap { padding:0; max-width:none; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation:none !important; transition:none !important; }
}