/* TM EVENT – Kundenseite (baut auf verwaltung/app.css auf) */
.k-kontakt { font-weight: 700; font-size: .9rem; text-decoration: none; color: var(--violet); }
.k-kontakt:hover { color: var(--pink); }
.kundenseite .hello h1 { font-size: clamp(1.8rem, 6vw, 4rem); overflow-wrap: normal; hyphens: auto; -webkit-hyphens: auto; }

.k-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.k-raster > .card + .card { margin-top: 0; }
@media (min-width: 1100px) {
  .k-raster { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); }
  .k-raster > .card:first-child { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow: auto; }
}

/* A4-Dokument im Rahmen, passend verkleinert */
.blatt-huelle { position: relative; width: 100%; overflow: hidden; background: #e9e6ee; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); }
.blatt-rahmen { position: absolute; top: 0; left: 0; display: block; border: 0; background: #fff; transform-origin: 0 0; }
.k-dokument .card-kopf { align-items: center; }

/* Annehmen */
.k-annehmen { font-size: 1.05rem; padding: .95rem 1.7rem; }
.k-link { background: none; border: 0; padding: 0; margin-top: 1.2rem; font: inherit; font-size: .92rem; color: var(--ink-soft); text-decoration: underline; cursor: pointer; }
.k-link:hover { color: var(--ink); }
details.k-vertrag { background: var(--mist); border-radius: 12px; padding: .8rem 1rem; margin: 1rem 0 .4rem; }
details.k-vertrag summary { cursor: pointer; font-weight: 700; }
details.k-vertrag .contract { max-height: 55vh; overflow: auto; margin-top: .6rem; padding-right: .4rem; }
.kundenseite .fields { grid-template-columns: 1fr 1fr; }
@media (max-width: 1099px) and (min-width: 641px) { .kundenseite .fields { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .kundenseite .fields { grid-template-columns: 1fr; } .kundenseite .field.wide { grid-column: auto; } }

/* Erfolg */
.k-erfolg { display: flex; gap: 1rem; align-items: flex-start; }
.k-erfolg h2 { margin-bottom: .2rem; }
.k-haken { width: 48px; height: 48px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--ok); color: #fff; font-size: 1.5rem; font-weight: 800; }

/* Bezahlen */
.k-zahlen { display: grid; grid-template-columns: 1fr; gap: 1.2rem; margin-top: .8rem; }
dl.k-bank { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1rem; align-items: baseline; }
dl.k-bank dt { color: var(--ink-soft); font-size: .9rem; }
dl.k-bank dd { overflow-wrap: anywhere; }
dl.k-bank code { font: 600 .98rem ui-monospace, "Cascadia Mono", Consolas, monospace; }
.k-betrag { font-family: var(--display); font-size: 1.6rem; }
.k-kopie { margin-left: .5rem; border: 0; background: var(--mist); border-radius: 999px; padding: .15rem .6rem; font: 700 .75rem var(--body); color: var(--ink-soft); cursor: pointer; }
.k-kopie:hover { color: var(--ink); }
.k-qr { display: grid; justify-items: start; gap: .4rem; }
.k-giro { display: grid; justify-items: center; gap: .3rem; font-size: .8rem; color: var(--ink-soft); }
.k-giro svg { width: 200px; height: 200px; border-radius: 10px; box-shadow: 0 0 0 1px var(--line); }

/* Bewertung */
.k-sterne { border: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .1rem; }
.k-sterne legend { font-weight: 700; margin-bottom: .4rem; width: 100%; }
.k-sterne input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.k-sterne label { font-size: 2.6rem; line-height: 1; cursor: pointer; color: #d9d2e3; padding: 0 .1rem; transition: transform .12s, color .12s; }
.k-sterne label:hover { transform: scale(1.12); }
.k-sterne[data-wert="1"] label:nth-of-type(-n+1), .k-sterne[data-wert="2"] label:nth-of-type(-n+2), .k-sterne[data-wert="3"] label:nth-of-type(-n+3),
.k-sterne[data-wert="4"] label:nth-of-type(-n+4), .k-sterne[data-wert="5"] label:nth-of-type(-n+5) { color: #e0a800; }
.k-sterne input:focus-visible + label { outline: 2px solid var(--pink); outline-offset: 2px; border-radius: 6px; }
.k-bew-zitat { background: var(--mist); border-radius: 14px; padding: 1rem 1.2rem; margin-top: 1rem; display: grid; gap: .4rem; }
.k-bew-zitat .sterne { color: #e0a800; font-size: 1.4rem; letter-spacing: .08em; }
.kundenseite .k-bew .field { display: grid; gap: .3rem; }
.kundenseite .k-bew .field.wide, .kundenseite .k-bew .field { grid-column: auto; }
@media (min-width: 1100px) { .k-raster.k-bew { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); } .k-raster.k-bew > .card:first-child { position: static; max-height: none; } }

@media (max-width: 640px) {
  .kundenseite .fields { grid-template-columns: 1fr; }
  .k-kontakt { font-size: .8rem; }
}
@media print {
  .kundenseite .bar, .kundenseite .hello, .kundenseite .foot { display: none; }
}