/* Eigene Styles der App: alles, was nicht aus den Tailwind-Klassen der
Templates kommt. Plain CSS wirkt ohne Build-Schritt; app.css (Tailwind)
enthält nur Klassen, die beim letzten Build im Content-Scan standen. */
/* Ersatz für Tailwind-Arbitrary-Values wie -top-[11px]/overflow-y-visible,
die in der vorkompilierten app.css nur nach einem neuen Build stünden. */
.pp-ftop {
top: -11px;
}
/* .mb-0 steht nicht im vorkompilierten app.css - gebraucht in
booking_form.html, um den space-y-4-Abstand (:where()-Selektor,
Spezifität 0) für genau einen Übergang zu überschreiben (Ausweis-ID ->
Gäste/Kinder/Kleinkinder-Zeile, siehe dortiger Kommentar). */
.mb-0 {
margin-bottom: 0;
}
/* Bündelt das wiederkehrende Muster des schwebenden Labels ("absolute
pp-ftop left-2 text-xs font-medium text-gray-500 bg-white px-1"). Die
Werte kommen aus den Custom Properties, die app.css (Tailwind) auf :root
setzt, damit sie mit den Utility-Klassen übereinstimmen. */
.pp-floating-label {
position: absolute;
top: -11px;
left: calc(var(--spacing) * 2);
font-size: var(--text-xs);
line-height: var(--text-xs--line-height, calc(1 / 0.75));
font-weight: var(--font-weight-medium);
color: var(--color-gray-500);
background-color: var(--color-white);
padding-inline: calc(var(--spacing) * 1);
}
.pp-oy-visible {
overflow-y: visible;
}
/* Unsichtbarer Wrapper für Grid-Layouts: die zwei Felder darin (z.B.
Anzahlung + Sonderpreis) erscheinen als eigene Zellen im Eltern-Grid,
lassen sich aber gemeinsam über eine ID/Klasse ein- und ausblenden (siehe
#offerPriceContainer in booking_form.html + form.js::checkBookingVisibility()).
Die zweite Regel erzwingt "display:none" auch zusammen mit .hidden -
sonst könnte die Lade-Reihenfolge (app.css vor styles.css) das Verstecken
bei gleicher Spezifität überschreiben. */
.pp-display-contents {
display: contents;
}
.pp-display-contents.hidden {
display: none;
}
/* Container Query Basis (entscheidet nach Box-Breite, nicht Viewport) */
.pp-cq {
container-type: inline-size;
}
/* --- Quill: Werkzeugleiste als Popup über dem Editor --- */
[data-pp-quill="1"] {
position: relative;
}
[data-pp-quill="1"] .pp-quill-toolbar {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 100%;
margin-bottom: 8px;
width: max-content;
max-width: min(92vw, 520px);
z-index: 9999;
display: none; /* schaltet JS */
padding: 6px 8px;
background: #fff;
border: 1px solid rgba(0,0,0,0.08);
border-radius: 10px;
box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}
[data-pp-quill="1"] .pp-quill-toolbar.ql-toolbar {
margin: 0 !important;
}
[data-pp-quill="1"] .pp-quill-editor {
padding-top: 0 !important;
min-height: 140px;
/* Die Eingabefläche füllt den ganzen Rahmen - sonst ist sie nur so hoch
wie der Text, und ein Klick darunter ginge ins Leere. */
display: flex;
flex-direction: column;
cursor: text;
}
[data-pp-quill="1"] .pp-quill-editor .ql-editor {
flex: 1 1 auto;
height: auto;
}
/* Pfeil unter der Werkzeugleiste */
[data-pp-quill="1"] .pp-quill-toolbar::after {
content: "";
position: absolute;
left: 50%;
top: 100%;
width: 10px;
height: 10px;
background: #fff;
border-right: 1px solid rgba(0,0,0,0.08);
border-bottom: 1px solid rgba(0,0,0,0.08);
transform: translateX(-50%) rotate(45deg);
}
/* --- Owner-Raster ---
schmal: cal -> pick -> form (Liste weg, Auswahlfeld statt ihrer)
breit: cal | list (oben), form darunter
Die Schwelle 660px kommt aus dem, was die beiden Spalten wirklich
brauchen, und gilt überall gleich - gemessen wird der Kasten, nicht das
Gerät:
Kalender 7 Tagesboxen + 6 Zwischenräume; unter rund 45px Boxbreite
stehen die Bänder mit den Namen nur noch als Streifen da
-> 320px
Liste 70 + 70 + 30px feste Spalten, macht 170px; damit vom Namen
mehr bleibt als drei Buchstaben, braucht die erste Spalte
rund 150px -> 320px
Zwischenraum -> 16px */
.pp-owner-grid {
display: grid;
gap: calc(var(--spacing) * 4);
align-items: start;
/* Eine Spalte; die zweite kommt erst mit der Regel unten dazu. Kein
repeat(auto-fit, ...): das öffnete schon vor der Schwelle zwei Spalten,
während die Bereichsnamen hier noch eine einzige beschreiben. */
grid-template-columns: 1fr;
/* Schmal: Kalender, dann die Buchungsauswahl, dann die Form. Die Auswahl
sitzt zwischen beiden, weil sie zu beidem gehört: was im Kalender
angetippt wurde, steht danach hier, und was hier gewählt wird, füllt
die Preisbox direkt darunter. */
grid-template-areas:
"cal"
"pick"
"form"
"list";
}
@container (min-width: 660px) {
.pp-owner-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-areas:
"cal list"
"form form";
}
}
/* Areas */
.pp-area-calendar { grid-area: cal; min-width: 280px; }
.pp-area-picker { grid-area: pick; min-width: 0; }
.pp-area-form { grid-area: form; }
.pp-area-list { grid-area: list; min-width: 0; } /* nötig für Tabellen/Overflow */
/* --- Buchungsauswahl statt Buchungsliste ---
Die Tabelle ist vier Spalten breit, trägt zweizeilige Zellen und einen
20px-Löschknopf je Zeile. Wo sie nicht neben den Kalender passt, steht das
Auswahlfeld aus partials/booking_picker.html an ihrer Stelle - unabhängig
vom Gerät: ein schmales Fenster am Schreibtisch hat dasselbe Platzproblem
wie ein Telefon.
Die Bedingung ist dieselbe 660px wie beim Raster darüber: genau dort
bekommt die Liste ihre eigene Spalte neben dem Kalender. Darunter ist sie
ausgeblendet - nur sie, nicht ihre Zeilen: die bleiben im Dokument, weil
Auswahlfeld und Kalender ihren Klick auslösen (siehe booking_picker.html). */
.pp-area-list {
display: none;
}
.pp-booking-picker {
display: flex;
align-items: center;
gap: 8px;
}
.pp-booking-picker-feld {
flex: 1 1 auto;
min-width: 0;
}
/* Die beiden Knöpfe sind quadratisch und so hoch wie das Feld daneben -
statt der 24px hohen Leiste über die ganze Breite, die .icon-btn sonst
ergibt.
Zwei Klassen im Selektor: .icon-btn trägt width:100% und steht in dieser
Datei weiter unten, und bei gleicher Spezifität gewänne die spätere Regel. */
.pp-booking-picker .pp-booking-picker-btn {
flex: 0 0 auto;
width: 38px;
height: 38px;
padding: 0;
font-size: 16px;
}
.pp-booking-picker select {
min-height: 38px;
}
/* 16px, sonst zoomt iOS Safari beim Antippen hinein und kommt nicht wieder
heraus - und 44px Kantenlänge nach Apple HIG, wo getippt statt geklickt
wird. */
@media (pointer: coarse) {
.pp-booking-picker select {
min-height: 44px;
font-size: 16px;
}
.pp-booking-picker .pp-booking-picker-btn {
width: 44px;
height: 44px;
}
}
@container (min-width: 660px) {
.pp-area-list {
display: block;
}
.pp-area-picker {
display: none;
}
}
/* --- Objekt-Bereiche (Container Query statt Tailwind-Breakpoints) ---
schmal: details -> seasons
breit: details | seasons */
.pp-props-panels {
display: grid;
gap: 0;
align-items: start;
grid-template-columns: 1fr;
}
@container (min-width: 580px) {
.pp-props-panels {
grid-template-columns: 50% 50%;
}
}
/* Verhindert Overflow/Scrollbar durch Inhalte in Grid-Items */
.pp-props-panel {
min-width: 0;
}
/* 2 Spalten innerhalb eines Bereichs - immer, auch schmal */
.pp-props-grid-2 {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: calc(var(--spacing) * 6);
}
/* 3 Spalten innerhalb eines Bereichs - immer, auch schmal */
.pp-props-grid-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* --- Formular-Raster (Reihenfolge nur schmal festlegen) ---
schmal: price -> meta -> left -> right
breit: price|meta (oben), left|right (unten) */
.booking-form {
container-type: inline-size;
}
.pp-booking-form-grid {
display: grid;
gap: calc(var(--spacing) * 2);
/* Schmal: gewünschte Reihenfolge */
grid-template-columns: 1fr;
grid-template-areas:
"price"
"meta"
"left"
"right";
}
.pp-form-left,
.pp-form-right {
min-width: 0;
align-self: start;
}
/* Diese Wrapper-Klassen stehen in booking_form.html */
.pp-form-price { grid-area: price; }
.pp-form-meta { grid-area: meta; }
.pp-form-left { grid-area: left; }
.pp-form-right { grid-area: right; }
@container (min-width: 580px) {
.pp-booking-form-grid {
grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr);
grid-template-areas:
"price meta"
"left right";
align-items: start;
}
.pp-form-price { grid-column: 1; grid-row: 1; }
.pp-form-meta { grid-column: 2; grid-row: 1; }
.pp-form-left { grid-column: 1; grid-row: 2; align-self: start; }
.pp-form-right { grid-column: 2; grid-row: 2; align-self: start; }
}
/* Eingabefeld mit Währungszeichen */
.pp-currency-field {
position: relative;
}
.pp-currency-symbol {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
color: var(--color-gray-500);
font-size: 14px;
pointer-events: none;
}
/* Beschriftung für Quill-Felder: sitzt in der Box oben links, nicht auf der
Rahmenlinie, wo der Formular-Wrapper (overflow-x-auto) sie abschneiden
würde. Die Quill-Werkzeugleiste ist ein Popup über der Box
([data-pp-quill="1"] .pp-quill-toolbar, bottom:100%, z-index:9999) und
kollidiert nicht damit. pointer-events:none, damit es keine Klicks oben
links im Editor blockiert. */
.pp-vlabel {
position: absolute;
top: 6px;
left: -7px;
writing-mode: vertical-rl;
transform: rotate(180deg);
background: #fff;
padding: 2px 3px;
font-size: 0.75rem;
font-weight: 500;
color: var(--color-gray-500);
white-space: nowrap;
z-index: 20;
pointer-events: none;
}
/* --- Gast-Kalender (wie beim Owner: auto-fit, kein CQ-Breakpoint) --- */
.pp-guest-grid {
display: grid;
gap: calc(var(--spacing) * 2);
align-items: stretch;
/* 2 Spalten nur, wenn wirklich Platz da ist, sonst 1 */
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
/* Verhindert Overflow/Scrollbar durch Inhalte */
.pp-guest-left,
.pp-guest-right {
min-width: 0;
height: 100%;
}
/* Übersicht immer in voller Breite (unter beiden Spalten) */
.pp-guest-overview {
grid-column: 1 / -1;
}
/* --- Kalender-Dekoration --- */
.booking-checkIn-div,
.booking-checkOut-div {
position: absolute;
width: 50%;
height: 100%;
z-index: 1;
pointer-events: none;
}
.booking-checkIn-div {
right: 0;
bottom: 0;
}
.booking-checkOut-div {
left: 0;
top: 0;
}
/* Tooltip (das Markup nutzt opacity-0 + transition über Tailwind).
Die Preis-Aufschlüsselung (Saisonpreise, Rabatte, Gebühren - Inhalt aus
price.js::updatePrice()) öffnet zweigleisig: per Hover auf Zeigergeräten,
per Tippen über die Klasse .pp-price-open (siehe
price.js::initPriceInfoToggle() und den Button in booking_price_box.html) -
auf Touch-Geräten gibt es kein Hover. */
@media (hover: hover) and (pointer: fine) {
#priceBox:hover #priceTooltip {
opacity: 1;
}
}
#priceBox.pp-price-open #priceTooltip {
opacity: 1;
pointer-events: auto;
}
/* Das Markup begrenzt auf max-w-[320px]; auf schmalen Viewports liefe der
mittig ausgerichtete Tooltip damit seitlich aus dem Bild. */
#priceTooltip {
max-width: min(320px, calc(100vw - 2rem));
}
/* Tipp-Hinweis für die Aufschlüsselung - nur dort sichtbar, wo es kein
Hover gibt.
Der Marker sitzt mittig im leeren pb-4-Streifen am unteren Rand der Box;
rechts unten verdeckte er #priceTotal. Das eigentliche Tipp-Ziel ist die
ganze Preisbox (siehe initPriceInfoToggle() in price.js), der Button
bleibt als fokussierbares Bedienelement für Tastatur und Screenreader. */
.pp-price-info-toggle {
display: none;
}
@media (hover: none), (pointer: coarse) {
#priceBox {
cursor: pointer;
}
.pp-price-info-toggle {
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 18px;
padding: 0;
border: 0;
background: none;
color: var(--color-gray-400);
font-size: 13px;
line-height: 1;
cursor: pointer;
}
#priceBox.pp-price-open .pp-price-info-toggle {
color: var(--color-header-button-500);
}
}
.booking-date-editable {
cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
.booking-date-editable:hover {
text-decoration: underline;
color: #16a34a;
}
}
.booking-date-active {
cursor: pointer;
color: #16a34a;
font-weight: 600;
}
/* --- Tabellen (Objekte, Saisons, iCal, Buchungsliste) --- */
table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
th,
td {
border: 1px solid var(--color-gray-300);
padding: 2px 4px;
}
th {
background: var(--color-gray-200);
text-align: left;
}
@media (hover: hover) and (pointer: fine) {
table:not(.booking-table) tbody tr:hover {
background: var(--color-gray-50);
}
}
/* Symbole in Tabellen */
.delete-btn,
.calendar-btn,
.edit-btn,
.sync-btn,
.reorder-btn {
background: none;
border: none;
cursor: pointer;
font-size: 16px;
}
@media (hover: hover) and (pointer: fine) {
.delete-btn:hover {
color: var(--color-red-500);
}
}
@media (hover: hover) and (pointer: fine) {
.calendar-btn:hover {
color: var(--color-blue-600);
}
}
.sync-btn.syncing {
display: inline-block;
animation: pp-spin 0.8s linear infinite;
cursor: default;
}
@keyframes pp-spin {
from { transform: rotate(0deg); }
to { transform: rotate(-360deg); }
}
/* Aktionsspalten (nur Symbole) */
.prop-actions-col {
width: 36px;
text-align: center;
}
/* Zusammengefasste Aktionsspalte: Abgleich, Kalender und Bearbeiten nebeneinander */
.prop-actions-col.prop-actions-merged {
width: 64px;
text-align: center;
padding-left: 0;
padding-right: 0;
}
.prop-actions-merged-inner {
display: flex;
gap: 4px;
justify-content: center;
align-items: center;
}
.prop-reorder-inner {
display: flex;
gap: 4px;
justify-content: center;
align-items: center;
margin-top: 2px;
}
.prop-reorder-inner .reorder-btn {
font-size: 12px;
}
/* --- iCal-Tabelle: die URL nimmt den Rest, die anderen Spalten bleiben sichtbar --- */
#icalTable {
width: 100%;
max-width: 100%;
table-layout: fixed; /* nötig */
}
/* URL-Spalte: der Rest */
#icalTable col.ical-col-url { width: auto; }
/* Übrige: feste/Mindestbreiten (nicht 1px, sonst verschwinden sie) */
#icalTable col.ical-col-active { width: 40px; } /* "Aktiv" + Button */
#icalTable col.ical-col-status { width: 70px; } /* "ok:2" */
#icalTable col.ical-col-sync { width: 100px; } /* "07.09.26-22:27" */
#icalTable col.ical-col-action { width: 24px; } /* 🗑️ */
/* Nur die Kopfzellen tragen diese Klassen (sie stehen im Template); die
Datenzeilen baut prop_ical_list.js::renderRow() ohne Klassen - die
Spaltenbreiten kommen von den
oben und table-layout:fixed. */
/* Außer der URL: kein Umbruch */
#icalTable th.ical-col-active,
#icalTable th.ical-col-status,
#icalTable th.ical-col-sync,
#icalTable th.ical-col-action {
white-space: nowrap;
}
/* URL darf schrumpfen */
#icalTable th.ical-col-url {
min-width: 0;
overflow: hidden;
}
/* --- FAQ: Frage und Antwort nebeneinander, schmal untereinander ---
Zwei Quill-Editoren nebeneinander brauchen Platz; mit der halben Breite
eines Telefons ist Schreiben darin nicht zumutbar - deshalb stapeln sie
sich unterhalb der Schwelle.
Mobile-first wie beim Kontakt-Präferenz-Block weiter unten: der
gestapelte Zustand ist der Normalfall, das Nebeneinander schaltet die
@container-Regel zu, wenn der Platz da ist. @container statt @media, weil
die Breite dieses Kastens zählt, nicht die des Fensters - der Bereich
sitzt in .pp-cq (properties.html). */
.qa-row {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 4px 8px;
margin-bottom: 12px;
}
.qa-cell {
flex: 0 0 100%;
min-width: 0;
border: 1px solid var(--color-gray-300, #d1d5db);
border-radius: 4px;
background: var(--color-white, #fff);
}
/* Beschriftung im gestapelten Zustand, innerhalb des Rahmens wie die
Legende eines Feldes - so gehört sie eindeutig zu einem der beiden
Felder. Quill hängt Werkzeugleiste und Editor an den Kasten an
(appendChild), löscht ihn nicht - das ::before bleibt also stehen. */
.qa-cell::before {
content: attr(data-label);
display: block;
padding: 3px 6px;
border-bottom: 1px solid var(--color-gray-200, #e5e7eb);
border-radius: 3px 3px 0 0;
background: var(--color-gray-50, #f9fafb);
font-size: 0.7rem;
font-weight: 600;
color: var(--color-gray-500, #6b7280);
}
/* Gestapelt zuerst und rechtsbündig: der Knopf gehört zur ganzen Zeile,
nicht zu einem der beiden Felder, und steht darum darüber. */
.qa-del {
order: -1;
margin-left: auto;
flex: 0 0 auto;
padding: 4px 8px;
border: 1px solid var(--color-gray-300, #d1d5db);
border-radius: 4px;
background: transparent;
color: var(--color-gray-500, #6b7280);
font-size: 12px;
cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
.qa-del:hover {
color: var(--color-red-700, #b91c1c);
border-color: var(--color-red-700, #b91c1c);
}
}
@media (pointer: coarse) {
.qa-del { min-width: 44px; min-height: 44px; }
}
/* Auf Touch trägt die Zeile nur den Anzeigeblock und den Papierkorb;
die beiden Editor-Kästen legt prop_qa_list.js dort gar nicht erst an,
getippt wird im Overlay (app_shared/row_editor.js). */
.qa-row-touch {
flex-wrap: nowrap;
align-items: center;
}
.qa-row-touch .qa-del {
order: 0;
margin-left: 6px;
margin-top: 0;
flex: 0 0 auto;
}
/* Auf einem breiten Touch-Gerät (Tablet) schaltete die Container-Abfrage
weiter unten sonst die Spaltenköpfe ein - über Zeilen ohne Spalten. */
@media (pointer: coarse) {
.qa-head {
display: none;
}
}
/* Die Spaltenköpfe stehen einmalig über den Spalten - das ergibt nur
nebeneinander Sinn. Gestapelt beschriftet ::before jedes Feld selbst. */
.qa-head { display: none; }
.qa-head-col {
flex: 1;
min-width: 0;
font-size: 0.75rem;
font-weight: 500;
color: var(--color-gray-500, #6b7280);
}
/* Platzhalter über der Löschen-Spalte, sonst sitzen die beiden Köpfe um
die Knopfbreite verschoben über ihren Feldern. */
.qa-head-gap { flex: 0 0 42px; }
@container (min-width: 580px) {
.qa-head {
display: flex;
gap: 8px;
margin-bottom: 6px;
}
.qa-row { flex-wrap: nowrap; }
.qa-cell { flex: 1 1 0; }
.qa-cell::before { display: none; }
.qa-del {
order: 0;
margin-left: 0;
margin-top: 4px;
}
}
/* --- Export-Bereich (Website): Handlung / Einstellungen / Ergebnis ---
Drei durch feine Linien getrennte Bänder. Oben mittig die eine
Haupthandlung, darunter ihre Einstellungen, darunter das Ergebnis.
Mobile-first wie im FAQ-Block: die Einstellungen stehen von Haus aus
untereinander, das Nebeneinander schaltet @container zu, wenn der Kasten
breit genug ist. */
.pp-astro-action,
.pp-astro-files {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 8px;
}
/* Abo-Zustand in der Fußzeile, neben der Version. Eigener Punkt davor statt
eines Trennzeichens im Text: der Text steht in neun Sprachen in den
Sprachdateien, das Trennzeichen gehört nicht hinein. */
.pp-abo::before {
content: " · ";
}
/* Der Satz unter dem inaktiven Export-Knopf. Ein title allein reicht nicht:
auf dem Telefon gibt es keinen Mauszeiger, der ihn hervorholen könnte. */
.pp-astro-hinweis {
margin: 8px 0 0;
text-align: center;
font-size: 0.8125rem;
line-height: 1.4;
color: var(--color-gray-500, #6b7280);
}
.pp-astro-opts {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 12px;
}
/* Knappe Beschriftung. "Sprachen" steht über seinen Feldern, "Vorlage:"
daneben - deshalb hier nur die Schrift, die Anordnung machen die
Eltern-Container. */
.pp-astro-label {
font-size: 0.75rem;
font-weight: 500;
color: var(--color-gray-500, #6b7280);
}
/* Drei Ebenen im Einstellungsband:
Zeile 1 Sprachen - immer für sich, die Chips brechen intern um
Zeile 2 die drei Auswahlfelder (.pp-astro-felder)
Zeile 3 der Status - er steht neben den Feldern, solange beide zusammen
passen, sonst darunter
Der Umbruch zwischen diesen Ebenen entsteht allein aus den Flex-Basen. Wie
die drei Auswahlfelder sich innen ordnen, entscheidet dagegen @container
weiter unten. */
/* Basis 100% = immer eine eigene Zeile. Die Chips darin brechen selbst um. */
.pp-astro-langs {
flex: 0 0 100%;
min-width: 0;
}
.pp-astro-langs .pp-astro-label {
margin-bottom: 4px;
}
/* Vorlage, Schrift, Farbe. Drei Stufen, nach Platz - mobile-first wie im
FAQ-Block, die breiteren Zustände schaltet @container zu:
schmal Beschriftung über dem Feld, jedes Paar in einer eigenen Zeile
mittel Beschriftung über dem Feld, die drei Paare nebeneinander
breit Beschriftung neben dem Feld, die drei Paare nebeneinander
Die Reihenfolge ist Absicht: die Beschriftung über ihr Feld zu legen
kostet nur Höhe und hält die drei Felder nebeneinander - gestapelt wird
erst, wenn auch das nicht mehr reicht. Auf der mittleren Stufe teilen sich
die drei Felder den Platz zu gleichen Teilen (flex-basis 0); der halbe
Zustand, in dem zwei Felder oben und eines darunter steht, entsteht so gar
nicht erst.
Die Schwellen messen den Kasten, nicht das Fenster - der Bereich sitzt in
.pp-cq (properties.html), dessen Inhaltsbreite bei max-w-[800px] und
Polsterung nie über 736px kommt. Davon gehen innen noch die 16px des
grauen Feldes auf jeder Seite ab. 460px trägt die drei Felder ohne
Beschriftung nebeneinander, 600px mit - gerechnet mit den längsten
Beschriftungen aller neun Sprachen (griechisch "Γραμματοσειρά:"). */
.pp-astro-felder {
flex: 1 1 100%;
min-width: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px 12px;
}
.pp-astro-field {
flex: 1 1 100%;
min-width: 0;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 2px;
}
/* Gibt es keine Schriften, nimmt prop_astro_export.js das Feld mit hidden aus
dem Band. Das display:flex oben blendete es sonst wieder ein - das
UA-Blatt verliert gegen jede Autoren-Regel. */
.pp-astro-field[hidden] {
display: none;
}
.pp-astro-field .pp-astro-label {
white-space: nowrap;
}
/* Unter seiner Beschriftung füllt das Auswahlfeld die Zeile: in natürlicher
Breite sähe es wie ein Rest aus, und die größere Trefferfläche ist auf
dem Telefon der Sinn der Übung. */
.pp-astro-field select {
width: 100%;
}
@container (min-width: 460px) {
.pp-astro-field {
flex: 1 1 0;
}
}
@container (min-width: 600px) {
/* Hier brauchen die Felder nur ihre natürliche Breite, und der Status
passt daneben. */
.pp-astro-felder {
flex: 1 1 auto;
}
.pp-astro-field {
flex: 0 0 auto;
flex-direction: row;
align-items: center;
gap: 6px;
}
.pp-astro-field select {
width: auto;
}
}
/* iOS Safari zoomt beim Antippen in jedes Auswahlfeld unter 16px hinein - und
kommt nicht wieder heraus. Dieselbe Regel wie bei den Gast-Feldern weiter
unten; hier zählt sie doppelt, weil der Export-Knopf darüber nach dem
Zoom aus dem Bild läuft. */
@media (pointer: coarse) {
.pp-astro-field select {
font-size: 16px;
}
}
/* Der Status steht immer in einer eigenen Zeile unter den Optionen,
linksbündig und um ein Fünftel der Breite eingerückt. Innen ein Raster:
Spalte 1 das Symbol, Spalte 2 der Satz ("Status: fertig") und darunter
der laufende Schritt - beide beginnen so an derselben Kante, egal wie
breit das Symbol gerade ist. */
.pp-astro-status {
flex: 0 0 100%;
box-sizing: border-box;
padding-left: 20%;
display: grid;
grid-template-columns: 14px minmax(0, 1fr);
column-gap: 8px;
align-items: center;
font-size: 0.875rem;
color: var(--color-gray-600, #4b5563);
text-align: left;
}
.pp-astro-status-icon {
display: inline-block;
width: 14px;
height: 14px;
}
.pp-astro-schritt {
grid-column: 2;
}
/* --- Übersetzungs-Korrekturen: Zeile anzeigen, im Overlay bearbeiten ---
Auf Touch-Geräten zeigt prop_translate_overrides.js statt der drei
Eingabefelder nur Text - iOS Safari zoomt sonst beim Fokussieren in jedes
Feld unter 16px hinein und kommt nicht wieder heraus. Bearbeitet wird im
Overlay darunter, mit Feldern in voller Größe. */
.trov-row-touch .trov-cell-edit {
cursor: pointer;
}
/* Der Kopf muss demselben Aufbau folgen wie die Zeilen darunter - sonst
stehen drei Spaltenüberschriften über einer einzigen Zelle. */
.trov-head-touch {
display: none;
}
.trov-head-line2 {
margin-top: 2px;
font-weight: 400;
}
@media (pointer: coarse) {
.trov-head-wide { display: none; }
.trov-head-touch { display: table-row; }
}
.trov-line {
display: flex;
align-items: baseline;
gap: 6px;
}
.trov-src-text {
flex: 1 1 auto;
min-width: 0;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.trov-lang-badge {
flex: 0 0 auto;
padding: 0 6px;
border-radius: 9999px;
background: var(--color-gray-100, #f3f4f6);
font-size: 0.7rem;
color: var(--color-gray-500, #6b7280);
}
.trov-tgt-text {
margin-top: 2px;
color: var(--color-gray-600, #4b5563);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* --- Raumbezeichnungen: Kopf und Körper sind zwei Tabellen ---
Der Kopf steht fest, der Körper scrollt - dafür sind es zwei getrennte
-Elemente. table-layout:fixed plus gleiche Spaltenbreiten bringt
die Überschriften über ihre Werte. */
.pp-cat-table {
table-layout: fixed;
width: 100%;
}
.pp-cat-table th:first-child,
.pp-cat-table td:first-child {
width: auto;
}
/* Breit genug für das Auswahlfeld mit der Anzahl. */
.pp-cat-table th:last-child,
.pp-cat-table td:last-child {
width: 88px;
}
/* Der Körper hat eine Bildlaufleiste, der Kopf nicht - die nutzbare Breite
wäre damit unterschiedlich und die letzte Überschrift versetzt.
scrollbar-gutter reserviert den Platz in beiden, auch wo gar nicht
gescrollt wird. */
.pp-cat-head,
.pp-cat-body {
scrollbar-gutter: stable;
}
.pp-cat-head {
overflow-y: auto;
}
/* Die Liste ist 10,5 Zeilen hoch. Die halbe Zeile am unteren Rand ist der
Hinweis, dass es weitergeht - eine glatt abschließende Liste sieht
vollständig aus, auch wenn sie es nicht ist.
Die Zeilenhöhe steht als eigener Wert da, weil sie sich aus dem
Auswahlfeld ergibt (text-xs + py-1 im Feld, py-1 in der Zelle) und im
Browser mit 32px gemessen wurde. Ändert sich eines davon, gehört hier
der neue Wert hin - deploy/checks/raumliste_check.py misst nach. */
.pp-cat-body {
--pp-cat-zeile: 32px;
max-height: calc(var(--pp-cat-zeile) * 10.5);
overflow-y: auto;
}
/* --- Sperrmodus im Owner-Kalender (bookings_page/sperrmodus.js) ---
Zwei Karteireiter unter dem Kalender schalten um, was ein Klick im Raster
bedeutet: Zeitraum wählen oder Tag sperren. Weil man das dem Raster nicht
ansieht, färbt sich im Sperrmodus der ganze Rahmen ein.
Die Farbe steht als Variable am Rahmen, damit das aktive Reiterblatt
dieselbe annehmen kann: es hängt dann sichtbar am Kalenderblatt, und der
inaktive Reiter liegt dahinter. */
/* Der Rahmen färbt nichts - er hält nur die Farbe bereit. Gefärbt wird das
Blatt darin, und das aktive Reiterblatt nimmt dieselbe Farbe an. */
.pp-kalender-rahmen {
--pp-rahmen-bg: #eaf3f3; /* zartes Petrol: der gewöhnliche Buchungskalender */
margin-bottom: 1rem;
}
/* Gelb statt Grau: Grau ist im Kalender schon die Hinterlegung belegter
Innentage (BUSY_BG in calendar.js) und würde sich damit beißen. */
.pp-kalender-rahmen--sperren {
--pp-rahmen-bg: #fefce8;
}
/* Nur wo es Reiter gibt (Owner-Kalender), trägt das Blatt eine Farbe; im
Gast- und Embed-Kalender bleibt es weiß. */
.pp-kalender-rahmen--reiter .pp-kalender-blatt {
background: var(--pp-rahmen-bg);
padding: 8px 8px 6px;
/* Unten eckig: dort hängen die Reiter an, ohne Zwischenraum. */
border-radius: 8px 8px 0 0;
transition: background-color 0.15s ease;
}
/* Kein Abstand nach oben: die Reiter sollen am Blatt hängen, nicht darunter
schweben. */
.pp-sperrmodus {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin: 0;
}
.pp-reiter {
display: flex;
gap: 4px;
padding-left: 8px;
}
/* Kein oberer Rand und nur unten gerundet: das Blatt hängt unter dem
Kalender, wie der Reiter an einer Karteikarte. */
.pp-reiter-blatt {
font-size: 0.8125rem;
line-height: 1;
padding: 7px 12px;
border: 1px solid var(--color-gray-300, #d1d5db);
border-top: none;
border-radius: 0 0 6px 6px;
background: var(--color-gray-100, #f3f4f6);
color: var(--color-gray-600, #4b5563);
cursor: pointer;
}
.pp-reiter-blatt[aria-selected="true"] {
background: var(--pp-rahmen-bg, #ffffff);
color: var(--color-gray-900, #111827);
font-weight: 600;
}
/* --- Karteireiter im Overlay (app_shared/reiter.js) ---
Dieselben Blätter, andersherum angeschlagen: am Kalender hängen sie unter
ihrer Karte, in einem Dialog sitzen sie oben auf ihr - deshalb hier der
obere Rand statt des unteren und die Rundung nach oben.
Ein Dialog mit Kontaktdaten und Mail-Historie untereinander würde länger
als ein Telefon hoch ist, und ein zentriertes position:fixed-Overlay lässt
sich nicht wegscrollen. Zwei Blätter halbieren die Höhe.
Das -1px zieht das gewählte Blatt über die Trennlinie, damit es mit
seiner Tafel verbunden aussieht. */
.pp-tafel-reiter {
display: flex;
gap: 4px;
padding: 0 4px;
border-bottom: 1px solid var(--color-gray-200, #e5e7eb);
}
.pp-tafel-reiter .pp-reiter-blatt {
border-top: 1px solid var(--color-gray-300, #d1d5db);
border-bottom: none;
border-radius: 6px 6px 0 0;
margin-bottom: -1px;
padding: 4px 10px;
}
/* Etwas mehr Kante zum Tippen, aber nicht die vollen 44pt der Apple HIG:
die Blätter sitzen oben im Dialog, wo kein anderes Ziel danebenliegt,
das man verfehlen könnte - und jeder Millimeter hier fehlt dem Inhalt. */
@media (pointer: coarse) {
.pp-tafel-reiter .pp-reiter-blatt {
min-height: 32px;
padding-left: 14px;
padding-right: 14px;
}
}
/* [hidden] trägt im UA-Blatt nur display:none - jede Autoren-Regel mit
einer Klasse schlägt das. Hier steht sie deshalb ausdrücklich. */
.pp-tafel[hidden] {
display: none;
}
/* --- Dialog der externen Buchung (showExtBookingModal) ---
Drei Teile: Kopf mit Titel, Zeitraum und Reitern, darunter die Tafel, die
scrollt, und eine Fußzeile, die stehen bleibt - Speichern und Abbrechen
gelten für beide Blätter und bleiben immer erreichbar.
Die Höhe ist begrenzt, weil ein zentriertes position:fixed-Overlay nicht
mitscrollt. dvh statt vh, weil die Adressleiste mobiler Browser vh nicht
mitwandern lässt. */
.pp-ext-dialog {
display: flex;
flex-direction: column;
width: 90%;
min-width: 300px;
max-width: 640px;
max-height: 90vh;
max-height: 90dvh;
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
}
.pp-ext-kopf {
padding: 1rem 1.25rem 0;
}
/* Plattform, Zeitraum und das Kreuz in einer Zeile. Der Zeitraum steht auf
flex:1 und schiebt das Kreuz an den Rand; beide Texte kürzen zur Not mit
Auslassungspunkten, statt die Zeile zu sprengen. */
.pp-ext-kopfzeile {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.pp-ext-titel {
flex: 0 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 600;
font-size: 0.875rem;
color: #1a1a1a;
}
.pp-ext-zeitraum {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.8rem;
color: var(--color-gray-500, #6b7280);
}
/* Der Storno-Vermerk im Kopf des Dialogs: in der Fehlerfarbe, aber ohne
Kasten - er meldet keinen Fehler, er erklärt einen Zustand. */
.pp-ext-storno {
margin-bottom: 0.5rem;
font-size: 0.75rem;
color: var(--color-red-600, #dc2626);
}
.pp-ext-storno[hidden] {
display: none;
}
/* Das Übernahme-Angebot: ein Streifen über den Feldern, in derselben
Aufmerksamkeitsfarbe wie der Hinweis auf der Objektseite. */
.pp-ext-adopt {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
padding: 0.375rem 0.5rem;
border: 1px solid var(--color-amber-300, #fcd34d);
border-radius: 6px;
background: var(--color-amber-50, #fffbeb);
font-size: 0.75rem;
color: var(--color-amber-800, #92400e);
}
.pp-ext-adopt[hidden] {
display: none;
}
#pp-ext-modal-adopt-text {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pp-ext-schliessen {
flex: 0 0 auto;
padding: 0 4px;
border: none;
background: none;
font-size: 1.4rem;
line-height: 1;
color: var(--color-gray-500, #6b7280);
cursor: pointer;
}
/* min-height:0, sonst gibt ein Flex-Kind seine Inhaltshöhe nicht her und
scrollt nie - es wäre wieder der ganze Dialog, der zu hoch ist. */
.pp-ext-koerper {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
padding: 0 1.25rem;
}
/* Trägt die drei Knöpfe - und ist der Bezugspunkt für die Meldung, die
darüber schwebt. */
.pp-ext-fuss {
position: relative;
padding: 0.75rem 1.25rem 1rem;
border-top: 1px solid var(--color-gray-100, #f3f4f6);
}
/* Die Meldung schwebt über der Fußzeile und nimmt keinen Platz ein - im
Fluss würde die Zeile beim Melden höher, und die Knöpfe rückten unter dem
Finger weg.
Dasselbe Aussehen wie .pp-kopiert weiter unten, aber nicht dessen
position:fixed: der Dialog liegt auf z-index 1000, ein Label an
mit z-index 70 läge dahinter. An der Fußzeile aufgehängt braucht es weder
Koordinaten noch eine Stapelordnung.
Leer bleibt sie durchsichtig statt display:none, damit das Auf- und
Abblenden laufen kann; pointer-events:none hält sie aus dem Weg, solange
sie unsichtbar über der Tafel liegt. */
.pp-ext-meldung {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
z-index: 5;
max-width: calc(100% - 2rem);
margin-bottom: 0.25rem;
padding: 3px 8px;
border-radius: 6px;
background: var(--color-gray-800, #1f2937);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
color: #fff;
font-size: 0.75rem;
line-height: 1.3;
text-align: center;
pointer-events: none;
opacity: 0;
transition: opacity 0.15s ease-out;
}
.pp-ext-meldung:not(:empty) {
opacity: 1;
}
/* Misserfolg in der Fehlerfarbe - dort steht auch ein längerer Satz, und
der soll nicht wie eine Bestätigung aussehen (wie .pp-kopiert--fehler). */
.pp-ext-meldung--fehler {
background: var(--color-red-600, #dc2626);
}
@media (prefers-reduced-motion: reduce) {
.pp-ext-meldung {
transition: none;
}
}
/* nowrap ist hier Absicht: die drei bleiben in einer Zeile, auch auf dem
schmalsten Telefon. Was dort nicht mehr passt, ist die Beschriftung des
ersten - nicht seine Zeile. */
.pp-ext-knoepfe {
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: 0.5rem;
}
.pp-ext-knopf {
flex: 0 1 auto;
min-width: 0;
padding: 0.25rem 0.5rem;
border: 1px solid var(--color-gray-300, #d1d5db);
border-radius: 6px;
background: #fff;
font-size: 0.875rem;
color: #374151;
/* nowrap hält die Beschriftung einzeilig, ellipsis fängt den Fall ab,
dass eine Sprache selbst in der Kurzfassung zu breit baut - lieber ein
gekürztes Wort als eine Zeile, die aus dem Dialog läuft. */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
}
/* Die Anfrage geht nach draußen, Abbrechen und Speichern schließen den
Dialog - das auto hält die beiden Gruppen auseinander. */
.pp-ext-knopf--anfrage {
margin-right: auto;
}
.pp-ext-knopf--speichern {
border: none;
background: #009FA6;
color: #fff;
font-weight: 600;
}
/* Lang- und Kurzfassung der Anfrage, umgeschaltet nach Viewport-Breite: der
Dialog nimmt unterhalb von 480px ohnehin die ganze Breite.
420px: darunter liegt jedes verbreitete Telefon außer den größten
(iPhone Pro Max 430, Pixel XL 412 - die tragen die Langfassung noch). */
.pp-ext-kurz {
display: none;
}
@media (max-width: 420px) {
.pp-ext-lang {
display: none;
}
.pp-ext-kurz {
display: inline;
}
.pp-ext-knoepfe {
gap: 0.375rem;
}
.pp-ext-knopf {
padding: 0.25rem 0.375rem;
}
}
/* Die schmalsten Geräte (320px) mit den längsten Sprachen - eine Stufe
kleiner, damit "Bewertung", "Abbrechen" und "Speichern" ungekürzt
nebeneinander stehen. */
@media (max-width: 360px) {
.pp-ext-knopf {
font-size: 0.8125rem;
}
}
/* Auf dem Telefon zählt jeder Rand: schmalere Polsterung und die vollen
90dvh, damit die Tafel selbst möglichst viel davon bekommt. */
@media (max-width: 480px) {
.pp-ext-dialog {
width: 100%;
margin: 0 8px;
}
.pp-ext-kopf {
padding: 1rem 1rem 0;
}
.pp-ext-koerper {
padding: 0 1rem;
}
.pp-ext-fuss {
padding: 0.75rem 1rem;
}
}
/* --- Quill: Abstände und weiche Umbrüche ---
Im Editor soll ungefähr zu sehen sein, wie der Text später steht - nicht
genau. Die Werte hängen nicht an denen der exportierten Seite
(astro/builder_templates, partials/css.part); beides lässt sich
unabhängig ändern.
Der Unterschied, um den es geht:
Enter neuer Absatz -> line-height + margin, die größere Lücke
Shift+Enter im Absatz -> nur line-height, die enge Zeile
Dazu markiert app_shared/pp_quill.js jeden weichen Umbruch mit einem
kleinen Zeichen, in einer eigenen Ebene über dem Text. */
/* Zwei Klassen im Selektor: quill.snow.css wird nach styles.css geladen
(base.html) und setzt .ql-editor p { margin: 0 } - bei gleichem Gewicht
gewänne das spätere Blatt. */
.ql-container .ql-editor p {
line-height: 1.2;
margin: 0 0 0.5em;
}
.pp-umbrueche {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
/* Über dem Text, aber unter der Werkzeugleiste. */
z-index: 1;
}
.pp-umbruch {
position: absolute;
color: var(--color-gray-400, #9ca3af);
font-size: 0.75em;
line-height: 1;
user-select: none;
}
/* Zeichenzähler unter einem Textfeld (Owner-Einstellungen: der
Vorschautext der Startseite). Die Warnung ist eine Farbe, keine Sperre -
länger ist erlaubt, Google schneidet dann nur ab. */
.pp-zaehler-zeile {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin-top: 4px;
}
.pp-zaehler {
font-size: 0.75rem;
line-height: 1rem;
color: var(--color-gray-500, #6b7280);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.pp-zaehler--warnung {
color: var(--color-red-600, #dc2626);
font-weight: 600;
}
/* --- Nachfrage über dem Sichern-Knopf (booking_shared/form.js) ---
Der Owner darf den Mindestaufenthalt unterschreiten - gefragt wird beim
Sichern, bei neuen wie bei geänderten Buchungen. Fest positioniert und
über dem Knopf, damit kein overflow den Kasten abschneidet und die Frage
dort steht, wo eben geklickt wurde. */
.pp-nachfrage-deckel {
position: fixed;
inset: 0;
z-index: 79;
background: transparent;
}
.pp-nachfrage {
position: fixed;
z-index: 80;
max-width: min(22rem, calc(100vw - 16px));
padding: 10px 12px;
border-radius: 8px;
border: 1px solid var(--color-gray-300, #d1d5db);
background: #fff;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}
.pp-nachfrage-text {
margin: 0 0 10px;
font-size: 0.8125rem;
line-height: 1.35;
color: var(--color-gray-700, #374151);
}
.pp-nachfrage-knoepfe {
display: flex;
gap: 8px;
justify-content: flex-end;
}
/* Der Abbruch ist der ruhige von beiden - er soll sich nicht anbieten wie
eine Bestätigung. */
.pp-btn.pp-btn--still {
background: var(--color-gray-200, #e5e7eb);
color: var(--color-gray-700, #374151);
}
/* Und der Gegenpol: was etwas wegwirft, sieht danach aus. Gedeckt, nicht
knallrot - der Übersetzungs-Cache ist ein Cache, sein Verlust kostet eine
Übersetzung und keine Daten. Kein Grund für einen Alarmknopf, aber auch
keiner, ihn wie "Speichern" aussehen zu lassen. */
.pp-btn.pp-btn--gefahr {
background: var(--color-red-50, #fef2f2);
color: var(--color-red-600, #dc2626);
border: 1px solid var(--color-red-300, #fca5a5);
}
.pp-btn.pp-btn--gefahr:hover:not(:disabled) {
background: var(--color-red-100, #fee2e2);
}
/* Das Kreuz an einem einzelnen Eintrag der Cache-Liste. Es sitzt in einer
dichten Liste und soll sie nicht zerreißen: sichtbar erst, wenn die Maus
auf dem Eintrag steht - auf Tastatur und Touch dagegen immer, sonst gäbe
es dort keinen Weg dorthin. */
.pp-tcache-eintrag .pp-tcache-weg {
opacity: 0;
transition: opacity 0.12s;
}
.pp-tcache-eintrag:hover .pp-tcache-weg,
.pp-tcache-eintrag .pp-tcache-weg:focus-visible {
opacity: 1;
}
@media (hover: none) {
.pp-tcache-eintrag .pp-tcache-weg { opacity: 1; }
}
/* --- Zeilen-Editor (app_shared/row_editor.js) ---
Gemeinsames Overlay für alle dichten Tabellen-Editoren auf Touch-Geräten. */
.pp-roweditor {
position: fixed;
inset: 0;
z-index: 60;
display: flex;
align-items: flex-end;
justify-content: center;
background: rgba(0, 0, 0, 0.5);
}
/* Tailwinds .hidden steht in @layer utilities, diese Datei ist ungelayert -
und ungelayertes CSS schlägt jede Layer-Regel, unabhängig von der
Spezifität. Das display oben würde .hidden also aushebeln. Gleiches
Muster wie bei .pp-display-contents.hidden weiter oben. */
.pp-roweditor.hidden {
display: none;
}
.pp-roweditor-box {
width: 100%;
max-width: 520px;
max-height: 90vh;
max-height: 90dvh;
overflow-y: auto;
padding: 16px;
padding-bottom: max(16px, env(safe-area-inset-bottom));
border-radius: 12px 12px 0 0;
background: var(--color-white, #fff);
}
.pp-roweditor-title {
margin-bottom: 12px;
font-size: 1rem;
font-weight: 600;
color: var(--color-gray-800, #1f2937);
}
.pp-roweditor-label {
display: block;
margin-bottom: 2px;
font-size: 0.75rem;
font-weight: 500;
color: var(--color-gray-500, #6b7280);
}
/* 16px ist hier keine Geschmacksfrage: darunter zoomt iOS beim Fokussieren. */
.pp-roweditor-field {
width: 100%;
margin-bottom: 12px;
padding: 8px 10px;
border: 1px solid var(--color-gray-300, #d1d5db);
border-radius: 6px;
background: var(--color-white, #fff);
font-size: 16px;
line-height: 1.4;
}
/* Formatierter Text im Overlay (Typ "richtext"). Quill hängt seine
Werkzeugleiste und den Editor in diesen Kasten; der Rahmen gehört
deshalb hierher und nicht an ein Eingabefeld, das es nicht gibt.
Die Höhe ist begrenzt und scrollt innen: eine lange Antwort würde den
Kasten sonst über den Schirm hinaus wachsen lassen, und die beiden
Knöpfe darunter wären nicht mehr zu erreichen. 16px auch hier - Quill
erbt die Schriftgröße, und darunter zoomt iOS beim Antippen hinein. */
.pp-roweditor-rich {
margin-bottom: 12px;
border: 1px solid var(--color-gray-300, #d1d5db);
border-radius: 6px;
background: var(--color-white, #fff);
font-size: 16px;
}
/* 16px muss am .ql-container und am .ql-editor stehen, nicht am Kasten
darum: quill.snow.css (CDN, base.html) setzt .ql-container auf 13px, und
das schlägt eine geerbte Größe. Unter 16px zoomt iOS Safari beim Antippen
in den Editor hinein und kommt nicht wieder heraus; der Editor ist ein
contenteditable und zählt dafür wie ein Eingabefeld.
Zwei Klassen im Selektor, damit es die Regel aus dem Quill-Blatt sicher
schlägt, unabhängig von der Ladereihenfolge der beiden Dateien. */
.pp-roweditor-rich .ql-container,
.pp-roweditor-rich .ql-editor {
font-size: 16px;
line-height: 1.45;
}
.pp-roweditor-rich .ql-editor {
min-height: 6rem;
max-height: 40vh;
max-height: 40dvh;
overflow-y: auto;
}
/* Ankreuzfeld: nicht auf volle Breite ziehen wie die Textfelder. */
.pp-roweditor-check {
width: 20px;
height: 20px;
margin-bottom: 12px;
}
.pp-roweditor-field[readonly] {
background: var(--color-gray-50, #f9fafb);
color: var(--color-gray-500, #6b7280);
}
.pp-roweditor-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: 4px;
}
@media (min-width: 640px) {
.pp-roweditor { align-items: center; }
.pp-roweditor-box { border-radius: 12px; }
}
/* Export-URL des iCal-Bereichs. Kein Umschaltpunkt, sondern Umbrechen nach
Platz: die Beschriftung steht immer für sich, URL und Knopf teilen sich
eine Zeile, solange die URL ihre Mindestbreite bekommt - sonst rutscht der
Knopf darunter. Gilt am Rechner im schmalen Fenster genauso wie auf Touch. */
.pp-ical-export-label {
flex: 0 0 100%;
}
.pp-ical-export-url {
flex: 1 1 240px;
min-width: 0;
}
.pp-ical-export-btn {
flex: 0 0 auto;
margin-left: auto;
}
/* Das Feld ist zwar readonly, aber fokussierbar - und damit zoomt iOS Safari
beim Antippen hinein und kommt nicht wieder heraus. Danach liegt auch jedes
Overlay im vergrößerten Viewport und ist nicht mehr ganz zu sehen.
16px verhindert den Zoom an der Wurzel. */
@media (pointer: coarse) {
#ical-export-url {
font-size: 16px;
}
/* Die
-Breiten gelten spaltenweise, unabhängig davon, welche Zellen
ausgeblendet sind. Auf Touch ist die Aufteilung eine andere:
Spalte 1-3 von der Anzeigezelle zusammengefasst (colspan 3)
Spalte 4 Aktiv
Spalte 5 Aktion
Deshalb werden hier die Breiten umgehängt, statt sie freizugeben:
table-layout bleibt fixed. Mit "auto" bestimmt eine lange, nicht
umbrechbare iCal-URL die Tabellenbreite und schiebt alles nach rechts aus
dem Kasten heraus - fixed hält sie dagegen in der Zelle und kürzt sie
mit Auslassungspunkten. */
#icalTable col.ical-col-active,
#icalTable col.ical-col-status {
width: 0; /* gehen in der Anzeigezelle auf */
}
#icalTable col.ical-col-sync {
width: 40px; /* hier sitzt auf Touch die Aktiv-Spalte */
}
}
/* Kurzes Label über einem Element (app_shared/kurzmeldung.js): das
"Kopiert!" der iCal-Liste, die Meldungen des Sperrmodus und der
Owner-Verwaltung. position: fixed, weil die Ziele teils in seitlich
scrollenden Tabellen stehen; die Koordinaten setzt das Skript. */
.pp-kopiert {
position: fixed;
z-index: 70;
padding: 3px 8px;
border-radius: 6px;
background: var(--color-gray-800, #1f2937);
color: #fff;
font-size: 0.75rem;
line-height: 1.3;
white-space: nowrap;
pointer-events: none;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
animation: pp-kopiert-ein 1.6s ease-out forwards;
}
/* Misserfolg in der Fehlerfarbe - dort steht auch ein längerer Satz, und
der soll nicht wie eine Bestätigung aussehen. */
.pp-kopiert--fehler {
background: var(--color-red-600, #dc2626);
}
@keyframes pp-kopiert-ein {
0% { opacity: 0; transform: translateY(4px); }
12%, 75% { opacity: 1; transform: none; }
100% { opacity: 0; transform: translateY(-2px); }
}
/* Wer Bewegung abbestellt hat, bekommt das Label ohne Ein- und Ausblenden -
es verschwindet trotzdem, das Skript räumt es weg. */
@media (prefers-reduced-motion: reduce) {
.pp-kopiert { animation: none; }
}
.pp-copied-flash {
animation: pp-copied 1.2s ease-out;
}
@keyframes pp-copied {
0%, 60% { background-color: var(--color-green-100, #d1fae5); }
100% { background-color: transparent; }
}
/* --- Tabellenzeilen: bearbeiten am Rechner, ansehen auf Touch ---
Die Zellen mit den Eingabefeldern bleiben im DOM - collectData() und das
Dirty-Tracking der Listen lesen daraus. Auf Touch werden sie nur
ausgeblendet und durch eine Anzeigezelle ersetzt; das Overlay schreibt in
dieselben Felder zurück. */
.pp-row-view {
display: none;
}
@media (pointer: coarse) {
.pp-row-view {
display: table-cell;
cursor: pointer;
}
.pp-row-edit {
display: none;
}
/* Auf Touch sichert jede Zeile beim Schließen ihres Overlays für sich,
und das Löschen ruft die API direkt - ein globaler Speichern-Knopf
hätte nichts zu tun. */
#season-save-btn,
#rebate-save-btn,
#fee-save-btn,
#trov-save-btn,
#ical-save-btn {
display: none;
}
}
/* Die Block-Variante für Listen, die keine Tabelle sind (FAQ). Sichtbar
ist sie nur auf Touch - am Zeigergerät wird in der Liste selbst getippt. */
.pp-row-view-block {
display: none;
}
@media (pointer: coarse) {
.pp-row-view-block {
display: block;
flex: 1 1 auto;
min-width: 0;
cursor: pointer;
}
}
.pp-row-view-line {
display: flex;
align-items: baseline;
gap: 6px;
}
.pp-row-view-main {
flex: 1 1 auto;
min-width: 0;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pp-row-view-side {
flex: 0 0 auto;
color: var(--color-gray-500, #6b7280);
}
/* Im Tabellenkopf tragen die Bausteine dieselben Klassen, damit Kopf und
Zeile bündig stehen - dort aber ohne die Hervorhebung der Datenzeile. */
thead .pp-row-view-main {
font-weight: inherit;
}
/* .season-table th zentriert - für die zweizeilige Touch-Überschrift ist
das falsch: die Bezeichnungen gehören nach links, nur die Nebenangabe
(Status / % / Betrag) steht rechts, und die schiebt der Flex-Umbruch
ohnehin dorthin.
Zwei Typen + eine Klasse (0,1,2), damit die Regel .season-table th (0,1,1)
sicher geschlagen wird; .season-table th steht weiter unten in dieser
Datei. */
thead th.pp-row-view {
text-align: left;
}
.pp-row-view-sub {
margin-top: 2px;
color: var(--color-gray-600, #4b5563);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* --- Vorschau der Vorlage im Export-Bereich ---
Klappt auf, zugeklappt bei jedem Aufruf. Anmutung und Mechanik wie die
Übersetzungs-Korrekturen weiter unten auf derselben Seite: Linie,
Beschriftung, Knopf mit Dreieck. Das Auf- und Zuklappen macht AppToggle
(static/js/app_shared/toggle.js) mit remember:false.
Der Rahmen darin hat erst beim Aufklappen eine Breite, deshalb misst
prop_astro_export.js auf das pp:toggle-Ereignis hin nach. */
/* Trägt die Lupe. Sie sitzt über dem Rahmen, nicht darin: im Rahmen läuft
die Musterseite, und die gehört der Vorlage. */
.pp-astro-preview-huelle {
position: relative;
}
.pp-astro-lupe-btn {
position: absolute;
top: 8px;
right: 8px;
z-index: 2;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--color-gray-200, #e5e7eb);
border-radius: 6px;
/* Nicht durchsichtig: darunter liegt die Musterseite in wechselnden
Farbwelten, auf einer davon wäre das Symbol sonst nicht zu sehen. */
background: rgba(255, 255, 255, 0.92);
color: var(--color-gray-600, #4b5563);
cursor: pointer;
padding: 0;
}
.pp-astro-lupe-btn:hover {
background: #fff;
color: var(--color-gray-900, #111827);
}
.pp-astro-lupe-btn svg {
width: 18px;
height: 18px;
fill: currentColor;
}
/* Die große Fassung: mittig auf der Seite, so groß wie der Schirm hergibt.
margin:auto zentriert ein modales