/* ============================================================
   KOMPASS · Ergebnisliste
   Eigene Datei, wird in index.html NACH style.css geladen.
   Ueberschreibt darum die alten Kompass-Regeln automatisch.
   Wenn du magst, kannst du den Inhalt spaeter ans Ende von
   style.css kopieren und den <link> in index.html entfernen.
   Gold liegt nur noch auf Eyebrow-Strich und Nadel.
   ============================================================ */

/* Aktiver Chip: Washi statt Gold */
.komp-q button.on{background:var(--washi);color:var(--dark);opacity:1;font-weight:500}

/* Ergebnisbereich */
.komp-result{min-height:64px;color:var(--washi);font-size:16px;font-weight:400}
.komp-result span{color:inherit;font-weight:inherit}
.komp-hint{color:var(--kyoto);font-size:14px}

.res-lab{display:block;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--kyoto);margin-bottom:4px}

.res-list{display:flex;flex-direction:column;max-width:560px}

.res-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:9px 0;border-top:1px solid rgba(244,241,234,.14)}
.res-row:last-child{border-bottom:1px solid rgba(244,241,234,.14)}

.res-name{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.res-land{font-size:19px;font-weight:400;letter-spacing:-.01em;line-height:1.3}

.res-badge{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--kyoto);border:1px solid rgba(155,157,150,.5);
  border-radius:999px;padding:3px 11px;white-space:nowrap}
.res-badge::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--matcha);flex:none}

.res-link{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:500;
  color:var(--matcha);border-bottom:1px solid rgba(164,174,164,.4);padding-bottom:2px;white-space:nowrap;
  transition:color .2s,border-color .2s}
.res-link:hover{color:var(--washi);border-color:var(--washi)}
.res-link.on{color:var(--washi);border-color:rgba(244,241,234,.45)}
.res-link.on:hover{border-color:var(--washi)}

.res-note{display:block;margin-top:10px;font-size:12.5px;color:var(--kyoto)}

@media(max-width:560px){
  .komp-result{font-size:15px}
  .res-row{flex-direction:column;align-items:flex-start;gap:7px;padding:11px 0}
  .res-land{font-size:18px}
  .res-link{font-size:14px}
}

/* ============================================================
   KOMPASS-SEITE (kompass.html)
   Festgelegte Variante: Bildkacheln.
   Klassen mit Prefix kmp-, damit nichts mit style.css kollidiert.
   ============================================================ */

/* ---- Hero flacher als auf der Startseite ---- */
.p-komp .hero{height:min(58vh,500px);min-height:380px}
.p-komp .hero .scrim{background:linear-gradient(90deg,rgba(27,35,34,.80) 0%,rgba(27,35,34,.52) 46%,rgba(27,35,34,.10) 76%,transparent 100%)}

/* ---- Die Idee: Text links, Bild rechts ---- */
.kmp-idea{display:grid;grid-template-columns:1fr 360px;gap:clamp(24px,4vw,46px);align-items:center}
.kmp-idea .fig{border-radius:6px;overflow:hidden;box-shadow:0 20px 44px rgba(37,47,46,.18)}
.kmp-idea .fig img{width:100%;aspect-ratio:16/11;object-fit:cover}
.kmp-idea p{color:var(--bambus);font-size:15.5px;max-width:58ch;margin-top:12px}

/* ---- Kompass-Kacheln auf eigenem Tatami-Band ---- */
/* Das Band grenzt den Bereich vom Washi darueber ab und macht die weissen Kacheln lesbar */
.kmp-alle{background:var(--tatami);border-top:1px solid rgba(118,105,89,.22);border-bottom:1px solid rgba(118,105,89,.22)}
.kmp-alle .sec-head p{color:#5f574a}
.kmp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.kmp-card{position:relative;display:flex;flex-direction:column;overflow:hidden;
  border:1px solid rgba(118,105,89,.3);border-radius:8px;background:var(--washi);
  transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease}
.kmp-card .pic{aspect-ratio:16/11;overflow:hidden;background:rgba(118,105,89,.14)}
/* Anschnitt sitzt mittig. Passt ein Bild nicht, hier object-position anpassen. */
.kmp-card .pic img{width:100%;height:100%;object-fit:cover;object-position:center;
  transition:transform .6s cubic-bezier(.2,.8,.2,1),filter .35s ease,opacity .35s ease}
.kmp-card .bd{display:flex;flex-direction:column;gap:7px;padding:16px 20px 20px;flex:1}
.kmp-card .num{font-size:10.5px;letter-spacing:.2em;color:var(--bambus);opacity:.75}
.kmp-card h4{font-size:19px;font-weight:400;letter-spacing:-.01em;line-height:1.25}
.kmp-card p{font-size:13.5px;color:var(--bambus);line-height:1.55;flex:1}
.kmp-card .go{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;
  color:var(--dark);border-bottom:1px solid var(--hinoki);padding-bottom:2px;width:fit-content;margin-top:4px}
.kmp-card.on:hover{border-color:var(--hinoki);transform:translateY(-2px);box-shadow:0 14px 30px rgba(37,47,46,.10)}
.kmp-card.on:hover .pic img{transform:scale(1.045)}

/* Drei Zustaende: fertig, als naechstes, in Bearbeitung */
.kmp-card.next{border-color:rgba(199,168,124,.75)}
.kmp-card.next .pic img{filter:grayscale(.5) contrast(.97);opacity:.72}
.kmp-card .nextflag{align-self:flex-start;margin-top:4px;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--bambus);background:rgba(199,168,124,.22);
  border:1px solid var(--hinoki);border-radius:999px;padding:4px 10px}
.kmp-card.off{background:transparent;border-style:dashed;border-color:rgba(118,105,89,.34)}
.kmp-card.off .pic img{filter:grayscale(1) contrast(.94);opacity:.4}
.kmp-card.off h4,.kmp-card.off p{opacity:.62}
.kmp-card .wipflag{align-self:flex-start;margin-top:4px;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--bambus);border:1px solid rgba(118,105,89,.4);
  border-radius:999px;padding:4px 10px}

/* ---- Ziel-Kompass im dunklen Band ---- */
.kmp-play .komp-inner{grid-template-columns:1fr 210px}
.kmp-ring{width:210px;height:210px;flex:none;opacity:.92}
.kmp-ring .nd{transform-box:fill-box;transform-origin:center;transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.kmp-qset{display:flex;flex-direction:column;gap:10px;margin:0 0 16px}
.kmp-qline{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.kmp-qlab{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--kyoto);min-width:86px}
.kmp-reset{background:none;border:none;color:var(--kyoto);font-family:inherit;font-size:12.5px;
  letter-spacing:.02em;cursor:pointer;padding:0;border-bottom:1px solid rgba(155,157,150,.45);margin-top:14px}
.kmp-reset:hover{color:var(--washi);border-color:var(--washi)}

/* ---- Beta-Hinweis ---- */
.kmp-beta{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;
  border:1px solid rgba(199,168,124,.6);border-radius:10px;background:rgba(226,213,196,.34);
  padding:clamp(20px,3vw,30px) clamp(20px,3vw,32px)}
.kmp-beta .ic{width:26px;height:26px;stroke:var(--hinoki);fill:none;stroke-width:1.5;flex:none;margin-top:2px}
.kmp-beta .tag{display:inline-block;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dark);background:var(--hinoki);border-radius:999px;padding:4px 11px;margin-bottom:10px}
.kmp-beta h3{font-size:clamp(20px,2.4vw,26px);font-weight:300;letter-spacing:-.01em;margin-bottom:8px}
.kmp-beta p{font-size:15px;color:#4a524f;max-width:62ch;margin-bottom:10px}
.kmp-beta p:last-of-type{margin-bottom:0}
.kmp-beta .link-more{margin-top:14px}

/* ---- Kontaktzeile unten ---- */
.kmp-ask{border-top:1px solid var(--line);padding-top:20px;display:flex;align-items:center;
  justify-content:space-between;gap:18px;flex-wrap:wrap}
.kmp-ask p{font-size:16px;color:var(--bambus)}

/* ---- Balken, nur in der Vorschaudatei sichtbar ---- */
.vbar{background:var(--dark);color:var(--washi);padding:14px 0}
.vbar .wrap{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.vbar b{font-size:13px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;color:var(--hinoki)}
.vbar span{font-size:14px;color:var(--matcha)}

/* ---- Mobil. Breakpoints wie im Rest der Seite: 900 und 560 ---- */
@media(max-width:900px){
  .kmp-idea{grid-template-columns:1fr;gap:20px}
  .kmp-idea .fig{order:-1}
  .kmp-play .komp-inner{grid-template-columns:1fr}
  /* Ring aus, genau wie .komp-ring auf der Startseite. Er landet sonst unter dem
     Ergebnis, wo die Nadel unbemerkt dreht, und kostet nur Scrollhoehe. */
  .kmp-ring{display:none}
  .kmp-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  /* Zwei Spalten bleiben, sonst waere die Kachelstrecke auf dem Handy dreimal so lang.
     Der Beschreibungssatz entfaellt, auf 165 px Breite ist er nicht lesbar. */
  .kmp-grid{gap:10px}
  .kmp-card .bd{padding:12px 13px 15px;gap:5px}
  .kmp-card .num{font-size:9.5px}
  .kmp-card h4{font-size:16px;line-height:1.2}
  .kmp-card p{display:none}
  .kmp-card .go{font-size:12.5px;margin-top:2px}
  .kmp-card .nextflag,.kmp-card .wipflag{font-size:8.5px;letter-spacing:.1em;padding:3px 8px}
  .kmp-qline{align-items:flex-start;flex-direction:column;gap:7px}
  .kmp-qlab{min-width:0}
  .kmp-beta{grid-template-columns:1fr}
  .kmp-beta .ic{display:none}
  .kmp-ask{flex-direction:column;align-items:flex-start}
  .kmp-ask .btn{width:100%;justify-content:center}
}