/* Aussehen des Vermieter-Cockpits (ergänzt app.css). */

.cockpit-inhalt { padding: 1.75rem 0 4rem; }
.cockpit h1 { font-size: clamp(1.5rem, 4vw, 2rem); }
.cockpit h2 { font-size: 1.2rem; margin-top: 0; }
.marke-zusatz { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--text-leise); margin-left: .35rem; }
.haupt-nav form { margin: 0; }

/* Anmeldung */
.anmelden { max-width: 24rem; margin: 8vh auto 0; background: var(--flaeche); border-radius: var(--radius); box-shadow: var(--schatten); padding: 1.6rem; }
.anmelden h1 { margin-bottom: 1rem; }
.anmelden .klein { margin: 1rem 0 0; }

/* Vier Status-Karten */
.status-karten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 1.25rem 0 1.75rem; }
.status-karte {
  display: flex; flex-direction: column; gap: .1rem;
  background: var(--flaeche); border-radius: var(--radius); box-shadow: var(--schatten);
  padding: 1rem 1.1rem; text-decoration: none; color: var(--text);
  border-top: 4px solid var(--linie);
}
.status-karte.aktiv { border-top-color: var(--akzent); }
.status-zahl { font-size: 2.2rem; font-weight: 800; line-height: 1.1; color: var(--text-leise); font-variant-numeric: tabular-nums; }
.status-karte.aktiv .status-zahl { color: var(--primaer); }
.status-name { font-weight: 700; }
.status-unterzeile { font-size: .85rem; color: var(--text-leise); }

/* Schnellaktionen */
.schnell { margin-bottom: 1.75rem; }
.schnell-knoepfe { display: flex; flex-wrap: wrap; gap: .6rem; }
.knopf-aus { opacity: .55; cursor: default; }
.knopf-aus:hover { filter: none; }
.knopf-aus small { margin-left: .4rem; font-weight: 400; }

/* Listen */
.liste-kasten { background: var(--flaeche); border-radius: var(--radius); box-shadow: var(--schatten); padding: 1.1rem 1.2rem; margin-bottom: 1.25rem; }
.liste-kasten .klein { margin: .75rem 0 0; }
.leer { color: var(--text-leise); margin: 0; }
.tabelle-rahmen { overflow-x: auto; margin: 0 -.4rem; }
.tabelle { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabelle th { text-align: left; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-leise); padding: .4rem; border-bottom: 1px solid var(--linie); white-space: nowrap; }
.tabelle td { padding: .55rem .4rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
.tabelle tr:last-child td { border-bottom: 0; }
.tabelle .rechts { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabelle .notiz td { padding-top: 0; color: var(--text-leise); font-style: italic; }
.tabelle .hervor { font-weight: 700; }
.zusatz { font-size: .85rem; color: var(--text-leise); white-space: nowrap; }

@media (max-width: 52rem) {
  .status-karten { grid-template-columns: repeat(2, 1fr); }
}

/* --- Preise pflegen -------------------------------------------------------- */
.klein.oben { margin: -.3rem 0 1rem; max-width: 52rem; }
.liste-kasten .meldung ul { margin: .4rem 0 0; padding-left: 1.2rem; font-weight: 400; }
.cockpit-inhalt > .meldung { display: flex; gap: .5rem; align-items: center; }

.preis-zeilen { margin-bottom: 1rem; }
.preis-zeile {
  display: grid; grid-template-columns: repeat(3, minmax(0, 9rem)) auto; gap: .75rem 1rem; align-items: end;
  border: 0; border-top: 1px solid var(--linie); margin: 0; padding: .9rem 0 .2rem;
}
.preis-zeile legend { font-weight: 700; padding: 0; float: left; width: 100%; grid-column: 1 / -1; margin-bottom: .1rem; }
.preis-zeile .feld { margin-bottom: .7rem; }
.preis-zeile .haken-feld { margin-bottom: 1.2rem; white-space: nowrap; }

.mit-euro { position: relative; }
.mit-euro input { padding-right: 1.9rem; text-align: right; font-variant-numeric: tabular-nums; }
.mit-euro span { position: absolute; right: .7rem; top: 50%; transform: translateY(-50%); color: var(--text-leise); pointer-events: none; }
input::placeholder { color: #a9b2bb; }

.saison { border-top: 1px solid var(--linie); }
.saison summary { display: flex; flex-wrap: wrap; gap: .2rem 1rem; align-items: baseline; padding: .8rem 0; cursor: pointer; list-style-position: outside; }
.saison summary::before { content: "▸"; color: var(--primaer); width: .8rem; }
.saison[open] summary::before { content: "▾"; }
.saison summary::-webkit-details-marker { display: none; }
.saison-neu summary { color: var(--primaer); }
.saison-formular { padding: .2rem 0 .6rem; }
.saison-kopf { display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1.2fr)) minmax(0, .8fr); gap: 0 1rem; }
.saison-preise { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0 1rem; }
.saison-preise label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.saison-loeschen { margin: 0 0 1rem; }
.knopf-gefahr { color: var(--schlecht); }

@media (max-width: 40rem) {
  .cockpit .kopf-innen { flex-wrap: wrap; padding: .5rem 0; gap: .3rem 1rem; }
  .cockpit .haupt-nav { width: 100%; justify-content: space-between; flex-wrap: wrap; gap: .3rem .9rem; }
  .cockpit .haupt-nav a { display: inline; }
  .preis-zeile { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .saison-kopf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .saison-kopf .feld:first-child { grid-column: 1 / -1; }
  .saison-preise { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.saison summary .zusatz { white-space: normal; }
.saison summary > * { min-width: 0; }

/* --- Buchungen ------------------------------------------------------------- */
.pfad-zeile { margin: 0 0 .5rem; font-size: .95rem; }
.pfad-zeile a { text-decoration: none; font-weight: 600; }
.status { display: inline-block; padding: .1rem .6rem; border-radius: 99px; font-size: .8rem; font-weight: 700; vertical-align: middle; white-space: nowrap; }
h1 .status { font-size: .9rem; margin-left: .4rem; letter-spacing: 0; }
.status-inquiry { background: #fdf0c4; color: #6b5200; }
.status-confirmed { background: #dcf1e4; color: #1d5c3e; }
.status-cancelled { background: #ececec; color: #555; }

.reiter { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; }
.reiter a { padding: .4rem .9rem; border-radius: 99px; background: var(--flaeche); border: 1px solid var(--linie); text-decoration: none; font-weight: 600; font-size: .95rem; color: var(--text); }
.reiter a.aktiv { background: var(--primaer); border-color: var(--primaer); color: #fff; }

.eckwerte { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .8rem 1.5rem; margin: 0; }
.eckwerte dt { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-leise); }
.eckwerte dd { margin: 0; font-weight: 600; }

.zwei-spalten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; align-items: start; }
.zwei-spalten .liste-kasten { margin-bottom: 1.25rem; }
.preis-formular { margin-bottom: 1.1rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--linie); }
.preis-formular .klein { margin: -.4rem 0 .9rem; }
.knopf-reihe { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.knopf-reihe form { margin: 0; }
.cockpit .knopf { white-space: normal; text-align: center; }

.zahlungen { list-style: none; margin: 0 0 1.25rem; padding: 0; }
.zahlungen li { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; justify-content: space-between; padding: .8rem .9rem; border-radius: 10px; margin-bottom: .6rem; border-left: 4px solid var(--akzent); background: var(--sand); }
.zahlungen li.erledigt { border-left-color: var(--gut); }
.zahlungen form { margin: 0; }
.storno-kasten { border-top: 1px solid var(--linie); padding-top: 1rem; }
.storno-kasten h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.gast-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0 1rem; }

@media (max-width: 52rem) {
  .zwei-spalten { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* --- Kalender -------------------------------------------------------------- */
.kal-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .9rem; }
.kal-monat { min-width: 9.5rem; text-align: center; font-size: 1.15rem; }
.kal-leiste .knopf:last-child { margin-left: auto; }

.kal-rahmen { overflow-x: auto; background: var(--flaeche); border-radius: var(--radius); box-shadow: var(--schatten); }
.kal { --name: 9.5rem; --tag: 2.15rem; min-width: calc(var(--name) + var(--tage) * var(--tag)); }
.kal-zeile { display: grid; grid-template-columns: var(--name) minmax(0, 1fr); border-top: 1px solid var(--linie); }
.kal-kopf { border-top: 0; }
.kal-name {
  position: sticky; left: 0; z-index: 3; background: var(--flaeche);
  padding: .45rem .7rem; font-weight: 700; font-size: .92rem; line-height: 1.25;
  display: flex; align-items: center; border-right: 1px solid var(--linie);
}
.kal-feld { display: grid; grid-template-columns: repeat(var(--tage), minmax(var(--tag), 1fr)); gap: 3px 0; padding: 4px 0; position: relative; }
.kal-kopf .kal-feld { padding: 0; }
.kal-tag { text-align: center; font-size: .9rem; font-weight: 600; padding: .3rem 0 .35rem; line-height: 1.15; }
.kal-tag small { display: block; font-size: .68rem; font-weight: 400; color: var(--text-leise); }
.kal-tag.we { background: #f3efe6; }
.kal-tag.heute { background: var(--primaer); color: #fff; border-radius: 6px 6px 0 0; }
.kal-tag.heute small { color: rgba(255, 255, 255, .85); }
.kal-zelle { grid-row: 1 / -1; margin: -4px 0; border-left: 1px solid #f0ebe0; }
.kal-zelle.we { background: #f8f5ee; }
.kal-zelle.heute { background: color-mix(in srgb, var(--primaer) 10%, #fff); }
.kal-zelle:hover { background: color-mix(in srgb, var(--akzent) 22%, #fff); }
.kal-balken {
  z-index: 2; margin: 0 2px; padding: 0 .45rem; border-radius: 6px;
  font-size: .8rem; font-weight: 600; line-height: 1.9rem; text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kal-balken.vorher { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: 0; }
.kal-balken.nachher { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: 0; }
.art-anfrage { background: #f7d154; color: #4d3b00; }
.art-bestaetigt { background: #3f9d6b; color: #fff; }
.art-fremd { background: #4a86c5; color: #fff; }
.art-gesperrt { background: #9aa3ab; color: #fff; }
.kal-legende { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; align-items: center; margin: .8rem 0 1.5rem; font-size: .9rem; }
.kal-legende i { display: inline-block; width: 1.1rem; height: .8rem; border-radius: 3px; vertical-align: -1px; margin-right: .2rem; }
.kal-legende .klein { margin: 0; }

.art-wahl { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.art-wahl label { display: flex; align-items: center; gap: .5rem; padding: .5rem .9rem; border: 1px solid var(--linie); border-radius: 99px; cursor: pointer; font-size: .95rem; }
.art-wahl label:has(input:checked) { border-color: var(--primaer); background: color-mix(in srgb, var(--primaer) 8%, #fff); }
.art-wahl input { width: 1.1rem; height: 1.1rem; min-height: 0; margin: 0; accent-color: var(--primaer); }
.eintrag-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0 1rem; }
.eintrag-formular .nur-sperre { display: none; }
.eintrag-formular:has(input[value="sperre"]:checked) .nur-buchung { display: none; }
.eintrag-formular:has(input[value="sperre"]:checked) .nur-sperre { display: revert; }
.eintrag-formular .klein { margin: .8rem 0 0; }

@media (max-width: 40rem) {
  .kal { --name: 7rem; --tag: 2rem; }
  .kal-name { font-size: .8rem; padding: .4rem .45rem; overflow-wrap: anywhere; hyphens: auto; }
}

.anmelden .anmelden-hinweis { margin: -.5rem 0 1rem; }