@font-face{font-family:'Karla';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/karla-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Karla';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/karla-latin-ext-400-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Karla';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/karla-latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Karla';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/karla-latin-ext-500-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Karla';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/karla-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Karla';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/karla-latin-ext-600-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Karla';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/karla-latin-700-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Karla';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/karla-latin-ext-700-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Fjalla One';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/fjalla-one-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Fjalla One';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/fjalla-one-latin-ext-400-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
/*
assets/css/pistenmarkt.css
---------------------------------------------------------------------------
Design-System für den HGH Ski-Basar - Farben, Typografie und die
Pill-Auswahlkomponente sind direkt aus der Pistenzettel-Vorlage
übernommen (gleiche Variablennamen, gleicher Look), erweitert um
Marktplatz-Kartenraster, Filterleiste, Lightbox/Modal und Navigation.
---------------------------------------------------------------------------
*/
:root{
--snow:#F5F9FC;
--paper:#FFFFFF;
--ink:#1E2A33;
--ink-soft:#54646F;
--line:#D9E4EC;
--accent:#2E6DA4;
--accent-deep:#163A5C;
--accent-warm:#B5432E;
--ok:#2E7D4F;
--heisenberg-blau:#2A4A79;
--shadow: 0 1px 2px rgba(22,42,58,.06), 0 8px 24px -12px rgba(22,42,58,.18);
--radius: 14px;
/* Bewusst IMMER hell - siehe unten. Kein @media (prefers-color-scheme)
mehr, damit die Seite unabhängig von der Betriebssystem-Einstellung
der jeweiligen Person durchgängig im hellen Modus angezeigt wird. */
color-scheme: light only;
}
*{box-sizing:border-box;}
html{ -webkit-text-size-adjust:100%; }
body{
margin:0;
background:var(--snow);
color:var(--ink);
font-family:'Karla',ui-sans-serif,system-ui,-apple-system,sans-serif;
-webkit-font-smoothing:antialiased;
}
/* Einheitliche Überschriftenfarbe (Heisenberg-Blau) auf allen Seiten -
einzelne Überschriften setzen daher keine eigene color-Regel mehr (siehe
z. B. .app__title, .schritt__inhalt h2 weiter unten). */
h1,h2,h3{ text-wrap:balance; margin:0; color:var(--heisenberg-blau); }
a{ color:var(--accent-deep); }
button{ font-family:inherit; }
/* ---------- Schnee-Hintergrund (rein dekorativ, siehe assets/js/schnee.js) ----------
position:fixed + z-index:0, direkt als erstes Element im - dadurch
liegt er unterhalb von allem, was danach im Dokument kommt (Navigation,
.app-Inhalt), ohne dass diese extra einen höheren z-index brauchen. Panels
und Karten haben ohnehin einen deckenden Hintergrund (var(--paper)), der
Schnee ist also nur in Zwischenräumen/auf der Seiten-Hintergrundfarbe
sichtbar - "hinter den Kacheln", nicht darüber. */
.schnee{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
/* Rein weiße Flocken auf dem fast weißen Seitenhintergrund (--snow) waren
praktisch unsichtbar (kaum Kontrast) - deshalb zusätzlich ein weicher
Schlagschatten/"Glow" (dunkel für Kontur + Akzentblau für den
Winter-Touch), der die Flocke auch auf hellem Grund klar erkennbar
macht, ohne dass sie wie ein bunter Punkt wirkt. */
.schnee span{
position:absolute; top:-10px; display:block; border-radius:50%;
background:#fff;
box-shadow: 0 0 0 1px rgba(30,42,51,.16), 0 1px 4px rgba(30,42,51,.22), 0 0 7px 1px rgba(46,109,164,.35);
animation-name:schnee-fallen; animation-timing-function:linear;
animation-iteration-count:infinite;
}
@keyframes schnee-fallen{
from{ transform:translate(0, 0); }
to{ transform:translate(var(--schnee-drift, 0px), 110vh); }
}
/* ---------- layout shell ---------- */
/* Einheitliche Inhaltsbreite für ALLE Seiten (vorher hatte z. B. der
Marktplatz 1280px, "Angebot erstellen" 760px und "Meine Angebote"/
"Anfragen"/"Moderation" 820px - das wirkte uneinheitlich). 820px war die
Breite von "Meine Angebote" und ist jetzt der verbindliche Standard, auch
für die Navigation (siehe .nav__inner), damit das Logo links exakt dort
beginnt, wo auch der Seiteninhalt beginnt. */
/* position:relative (ohne eigenen z-index) reicht, damit .app im
Stacking-Kontext als "positioniertes Element auf Stapel-Ebene 0" gilt und
dadurch - weil im Quelltext NACH dem Schnee-Container - über dem
fixierten Schnee liegt statt darunter (sonst würde ein unpositioniertes
Element trotz späterer Reihenfolge im Quelltext HINTER positionierten
Geschwisterelementen auf Ebene 0 gemalt, siehe .schnee weiter oben). */
.app{ max-width:1600px; margin:0 auto; padding:24px 20px 64px; position:relative; }
.app__eyebrow{
font-family:'Karla',ui-sans-serif,sans-serif;
font-size:12px; letter-spacing:.12em; text-transform:uppercase;
color:var(--accent); font-weight:700;
}
.app__title{
font-family:'Fjalla One',ui-sans-serif,sans-serif;
font-size:clamp(26px,4vw,36px);
letter-spacing:.01em;
}
.app__sub{ color:var(--ink-soft); font-size:15px; line-height:1.5; }
/* ---------- top navigation ---------- */
.nav{
background:var(--paper); border-bottom:1px solid var(--line);
position:sticky; top:0; z-index:40;
}
/* .nav selbst ist volle Breite (Hintergrund/Trennlinie sollen bis an den
Bildschirmrand gehen) - der eigentliche Inhalt liegt in .nav__inner mit
derselben max-width wie .app, damit das Logo links exakt dort beginnt,
wo auch der übrige Seiteninhalt beginnt (nicht ganz am Bildschirmrand).
position:relative, damit .nav__menu (siehe unten) sich daran statt an
der vollen Breite von .nav ausrichtet. */
.nav__inner{
max-width:1600px; margin:0 auto; position:relative;
display:flex; align-items:center; justify-content:space-between;
gap:12px; padding:10px 20px;
}
/* Kopfzeile jetzt bewusst schmal: kleines Icon-Logo + Name der GERADE
OFFENEN Seite (statt vorher einem großen, unbeschnittenen Logo) - alle
Seiten inkl. Konto/Abmelden liegen dafür in einem einzigen Menü hinter
dem Hamburger-Knopf (.nav__menu weiter unten), nicht mehr direkt in der
Kopfzeile. */
.nav__brand{ display:flex; align-items:center; gap:10px; min-width:0; }
.nav__brand-logo-link{ display:flex; flex:none; }
/* Gleiche Höhe wie der Menü-Knopf rechts (.nav__toggle, 38px) - beide sind
Flex-Kinder von .nav__inner mit align-items:center, dadurch bekommen sie
automatisch denselben Abstand nach oben/unten. Kein border-radius mehr -
das Logo bleibt eckig. */
.nav__brand-logo{ display:block; height:38px; width:auto; }
.nav__brand-seite{
font-family:'Fjalla One',ui-sans-serif,sans-serif; font-size:17px;
color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
display:inline-block; transition:opacity .15s ease, transform .15s ease;
}
/* Kurzer Fade+Slide beim Wechsel zwischen Marke ("HGH SKI-BASAR") und
Seitentitel (siehe Scroll-Logik in includes/kopf.php) statt eines
abrupten Text-Sprungs. */
.nav__brand-seite--wechsel{ opacity:0; transform:translateY(-4px); }
.nav__toggle{
display:inline-flex; align-items:center; justify-content:center;
width:38px; height:38px; border-radius:9px; border:1px solid var(--line);
background:var(--paper); cursor:pointer; flex:none;
}
.nav__toggle svg{ width:18px; height:18px; color:var(--ink); }
/* Ein einziges Dropdown-Menü für ALLE Seiten + Konto/Abmelden (ersetzt die
früheren zwei getrennten: Seiten-Links-Leiste + Konto-Dropdown). Kein
eigenes "display" gesetzt (Standard eines div ist block) - so reicht das
reine [hidden]-Attribut zum Ein-/Ausblenden per JS, ohne dass eine
Autor-Regel die Browser-Vorgabe [hidden]{display:none} überstimmen
könnte (siehe .karte[hidden] weiter unten für den Hintergrund, warum das
wichtig ist). */
.nav__menu{
position:absolute; top:calc(100% + 8px); right:20px;
width:270px; max-width:calc(100vw - 40px);
background:var(--paper); border:1px solid var(--line); border-radius:12px;
box-shadow:var(--shadow); padding:10px; z-index:50;
}
.nav__links{ display:flex; flex-direction:column; gap:2px; }
.nav__link{
display:flex; align-items:center; justify-content:space-between; gap:8px;
font-size:14px; font-weight:600; color:var(--ink-soft);
text-decoration:none; padding:10px 10px; border-radius:8px;
}
.nav__link:hover{ background:var(--snow); color:var(--ink); }
.nav__link.is-active{ background:color-mix(in srgb, var(--accent) 14%, var(--snow)); color:var(--accent-deep); }
.nav__badge{
min-width:17px; height:17px; padding:0 4px;
border-radius:999px; background:var(--accent-warm); color:#fff;
font-size:10.5px; font-weight:700; display:inline-flex;
align-items:center; justify-content:center;
}
.nav__menu-footer{ margin-top:6px; padding-top:10px; border-top:1px solid var(--line); }
.nav__user-info{ display:flex; align-items:center; gap:10px; padding:2px 10px 12px; min-width:0; }
.nav__avatar-klein{
width:30px; height:30px; border-radius:50%; flex:none;
background:var(--accent-deep); color:#fff;
font-family:'Karla',ui-sans-serif,sans-serif; font-weight:700; font-size:11.5px;
letter-spacing:.02em; display:flex; align-items:center; justify-content:center;
}
.nav__user-name{ font-size:13px; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav__logout{
display:block; text-align:center;
font-size:12.5px; font-weight:700; color:var(--ink-soft);
text-decoration:none; border:1px solid var(--line); border-radius:8px;
padding:8px 10px;
}
.nav__logout:hover{ border-color:var(--accent); color:var(--accent-deep); }
/* Sitzt links neben "Abmelden" (Hamburger-Menü UND schmale Menüleiste,
siehe .nav__sekundaer weiter unten) und klappt #klimateamBanner direkt
unter der Menüleiste auf/zu (siehe includes/kopf.php). Bewusst als
gleich hoher/breiter Knopf wie .nav__logout aufgebaut (identisches
Padding/Rahmen/Radius), nicht einfach ein bloßes Icon. */
.nav__menu-footer-aktionen{ display:flex; align-items:center; gap:8px; }
.nav__menu-footer-aktionen .nav__logout{ flex:1; }
.nav__klimateam-knopf{
flex:none; display:inline-flex; align-items:center; justify-content:center;
background:var(--paper); border:1px solid var(--line); border-radius:8px;
padding:8px 10px; cursor:pointer;
}
.nav__klimateam-knopf:hover, .nav__klimateam-knopf[aria-expanded="true"]{ border-color:var(--accent); }
.nav__klimateam-knopf img{ height:15px; width:auto; display:block; }
/* Zweite Leiste unter der Kopfzeile, NUR auf breiten Bildschirmen (siehe
@media weiter unten): zeigt alle Seiten + Konto/Abmelden direkt
ausgeklappt, ohne dass man dafür erst den Hamburger-Knopf braucht. Auf
schmalen Bildschirmen bleibt es bei der einen Kopfzeile + Hamburger-Menü
wie bisher (siehe .nav__toggle/.nav__menu oben). */
.nav__sekundaer{ display:none; }
.nav__sekundaer-links{ display:flex; align-items:center; gap:2px; flex-wrap:wrap; }
.nav__sekundaer-link{
display:flex; align-items:center; gap:6px;
font-size:13px; font-weight:600; color:var(--ink-soft);
text-decoration:none; padding:6px 9px; border-radius:8px; white-space:nowrap;
}
.nav__sekundaer-link:hover{ background:var(--snow); color:var(--ink); }
.nav__sekundaer-link.is-active{ background:color-mix(in srgb, var(--accent) 14%, var(--snow)); color:var(--accent-deep); }
/* Nur noch der Abmelden-Knopf hier - Initialen/Name stehen bereits im
Hamburger-Menü (.nav__menu-footer), auf der schmalen zweiten Leiste war
das schlicht zu viel für wenig Mehrwert. */
.nav__sekundaer-konto{ display:flex; align-items:center; gap:8px; flex:none; }
.nav__sekundaer .nav__logout{ padding:6px 12px; }
.nav__sekundaer .nav__klimateam-knopf{ padding:6px 12px; }
@media (min-width:961px){
/* Auf breiten Bildschirmen ist der Hamburger-Knopf anfangs überflüssig
(die zweite Leiste zeigt ja schon alles) - er erscheint erst, sobald
beim Scrollen die zweite Leiste einklappt (.nav--kompakt, siehe unten). */
.nav__toggle{ display:none; }
.nav--kompakt .nav__toggle{ display:inline-flex; }
/* Exakt dieselbe Breite wie der übrige Seiteninhalt (.app/.nav__inner,
820px) - nicht breiter. Bewusst OHNE Trennlinie zum Logo darüber (die
gab es früher als border-top, war aber unerwünscht). */
.nav__sekundaer{
display:flex; align-items:center; justify-content:space-between; gap:16px;
max-width:1600px; margin:0 auto; padding:8px 20px 10px;
max-height:60px;
overflow:hidden;
}
/* Sobald man scrollt (siehe Skript in includes/kopf.php), klappt diese
Leiste ein - ihr Inhalt bleibt über den Hamburger-Knopf erreichbar
(.nav__menu, gleicher Inhalt). BEWUSST OHNE CSS-transition auf
max-height/padding (gab es früher, war die Ursache für Ruckeln beim
Scrollen): max-height/padding sind layoutverändernde Eigenschaften -
sie über ~280ms zu animieren zwingt den Browser, bei praktisch jedem
einzelnen Scroll-Ereignis in diesem Zeitfenster neu Layout+Paint für
die halbe Kopfzeile zu berechnen (die Nav ist zudem position:sticky,
was das noch verschärft). Ein Wechsel von JS-Messzeitpunkt zu
ResizeObserver (siehe includes/kopf.php) hat das NICHT gelöst, weil
die eigentliche Kostenquelle die Animation selbst war, nicht in erster
Linie deren Messung. Jetzt klappt die Leiste sofort/ohne Animation ein
- genau wie das mobile Menü, der Filter-Umschalter und das
KlimaTeam-Banner in dieser Anwendung ohnehin bereits sofort statt
animiert umschalten (siehe dort) - dadurch fällt die wiederholte
Neuberechnung während des Scrollens komplett weg. */
.nav--kompakt .nav__sekundaer{
max-height:0; padding-top:0; padding-bottom:0;
}
}
/* Aufklappbares KlimaTeam-Banner direkt unter der Menüleiste (siehe
.nav__klimateam-knopf oben und includes/kopf.php) - soll optisch genauso
breit wirken wie der übrige, sichtbare Seiteninhalt (z. B. Filterleiste/
Kartenraster oder Logo-bis-Abmelden in der Nav). Deren Breite ist NICHT
820px, sondern 820px MINUS das eigene 20px-Innenabstand von .app/
.nav__inner links+rechts, also 780px - denn .app/.nav__inner sind selbst
schon die "Rahmen"-Box mit padding:...20px, ihr sichtbarer Inhalt liegt
780px breit darin. Ein eigenes max-width:820px hier (wie zuvor) hätte
dagegen den GRÜNEN Hintergrund bis an die volle 820px-Außenkante gemalt
(padding zählt bei box-sizing:border-box zur Box, nicht zusätzlich dazu)
- 20px auf jeder Seite breiter als der Rest des Seiteninhalts. Kein
eigenes border-radius/border-top, damit es optisch direkt an die
Menüleiste "anschließt". */
.klimateam-banner{
max-width:780px; margin:0 auto; padding:14px 20px;
background:color-mix(in srgb, var(--ok) 14%, var(--paper));
border:1px solid color-mix(in srgb, var(--ok) 35%, var(--line)); border-top:0;
border-radius:0 0 12px 12px;
font-size:14px; color:var(--ink); text-align:center;
}
.klimateam-banner[hidden]{ display:none; }
.klimateam-banner p{ margin:0; }
/* ---------- im Browser bearbeitbare Textbausteine ---------- */
/* Für alle ohne Bearbeitungsrechte ist ".bearbeitbar" ein reiner,
unsichtbarer Wrapper (kein data-schluessel, kein Stift-Knopf) - sieht
optisch identisch zum reinen Text aus, siehe pistenmarktBearbeitbarerText()
in includes/functions.php. */
.bearbeitbar--aktiv{ display:flex; align-items:flex-start; gap:6px; }
.bearbeitbar__anzeige{ min-width:0; flex:1 1 auto; }
.bearbeitbar__knopf{
flex:none; display:inline-flex; align-items:center; justify-content:center;
width:22px; height:22px; margin-top:1px; border-radius:6px; border:1px solid transparent;
background:transparent; color:var(--ink-soft); cursor:pointer; opacity:.55;
transition:opacity .15s ease, background .15s ease, border-color .15s ease;
}
.bearbeitbar__knopf svg{ width:13px; height:13px; }
.bearbeitbar__knopf:hover{ opacity:1; background:var(--snow); border-color:var(--line); color:var(--accent-deep); }
.bearbeitbar--bearbeitung{ display:block; }
.bearbeitbar--bearbeitung .bearbeitbar__anzeige{ display:block; }
.bearbeitbar__feld{
display:block; width:100%; max-width:480px; font-family:inherit; font-size:14px; color:var(--ink);
background:var(--snow); border:1.5px solid var(--accent); border-radius:9px; padding:8px 10px;
margin-bottom:6px;
}
textarea.bearbeitbar__feld{ max-width:640px; min-height:90px; line-height:1.5; resize:vertical; }
.bearbeitbar__aktionen{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.bearbeitbar__speichern, .bearbeitbar__abbrechen{
font-family:inherit; font-size:12.5px; font-weight:700; border-radius:8px; padding:6px 12px; cursor:pointer;
}
.bearbeitbar__speichern{ background:var(--accent-deep); color:#fff; border:1px solid var(--accent-deep); }
.bearbeitbar__speichern:hover{ background:var(--ink); }
.bearbeitbar__speichern:disabled, .bearbeitbar__abbrechen:disabled{ opacity:.6; cursor:default; }
.bearbeitbar__abbrechen{ background:var(--paper); color:var(--ink-soft); border:1px solid var(--line); }
.bearbeitbar__abbrechen:hover{ border-color:var(--accent); color:var(--accent-deep); }
.bearbeitbar__hinweis{ font-size:12px; color:var(--ink-soft); }
/* Platzhalter, wenn ein Untertitel absichtlich geleert wurde (siehe
pistenmarktInhalt()/pistenmarktBearbeitbarerText() in
includes/functions.php) - nur für Moderationsgruppen sichtbar, damit sie
den Stift zum Wieder-Hinzufügen finden; alle anderen sehen an dieser
Stelle einfach gar nichts. */
.bearbeitbar__leer-hinweis{ color:var(--ink-soft); font-style:italic; font-size:13px; }
/* ---------- flash messages ---------- */
.flash{
border-radius:12px; padding:12px 16px; margin-bottom:18px;
font-size:14px; font-weight:600; display:flex; align-items:flex-start; gap:10px;
border:1px solid var(--line);
}
.flash svg{ width:18px; height:18px; flex:none; margin-top:1px; }
.flash--ok{ background:color-mix(in srgb, var(--ok) 12%, var(--paper)); color:var(--ok); border-color:color-mix(in srgb, var(--ok) 35%, var(--line)); }
.flash--fehler{ background:color-mix(in srgb, var(--accent-warm) 12%, var(--paper)); color:var(--accent-warm); border-color:color-mix(in srgb, var(--accent-warm) 35%, var(--line)); }
/* ---------- panel (forms, cards, generic boxes) ---------- */
.panel{
background:var(--paper); border:1px solid var(--line);
border-radius:var(--radius); box-shadow:var(--shadow); padding:22px;
}
.panel__heading{ font-family:'Fjalla One',sans-serif; font-size:18px; letter-spacing:.02em; margin-bottom:4px; }
.panel__hint{ color:var(--ink-soft); font-size:13px; margin-bottom:18px; line-height:1.5; }
/* ---------- Schritte-Liste (siehe so-gehts.php) ---------- */
.schritte{ display:flex; flex-direction:column; gap:20px; }
.schritt{ display:flex; gap:14px; align-items:flex-start; }
.schritt__nummer{
width:32px; height:32px; border-radius:50%; flex:none;
background:var(--accent-deep); color:#fff;
font-family:'Karla',ui-sans-serif,sans-serif; font-weight:700; font-size:14px;
display:flex; align-items:center; justify-content:center;
}
/* Schritt-Titel/-Text sind jetzt bearbeitbare Textbausteine (siehe
so-gehts.php + pistenmarktBearbeitbarerText()) und deshalb keine echten
/
mehr (die .bearbeitbar-Hülle dazwischen wäre sonst ungültiges
HTML) - Optik bleibt identisch, .schritt__titel bekommt die
Überschriftenfarbe deshalb explizit statt über die h1,h2,h3-Regel oben. */
.schritt__titel{
font-family:'Fjalla One',sans-serif; font-size:16px; letter-spacing:.01em;
color:var(--heisenberg-blau); margin:2px 0 4px; display:block;
}
.schritt__text{ color:var(--ink-soft); font-size:14px; line-height:1.55; }
/* Schritt-Gruppen ("Ich suche .../Ich biete ...", siehe so-gehts.php), jede
mit eigener Überschrift und eigenem Hinzufügen-Knopf. Überschrift bewusst
deutlich größer als vorher (15px), aber klar kleiner als die Seiten-
(.app__title, clamp(26px,4vw,36px)) - dazwischen als eigene Ebene. */
.schritte-gruppe__titel{ font-size:21px; font-family:'Fjalla One',sans-serif; letter-spacing:.2px; margin-bottom:16px; }
.schritte-gruppe + .schritte-gruppe{ margin-top:8px; }
/* Fließtext-Block "Nutzungsbedingungen und Haftungsausschluss" (dritte
Gruppe auf so-gehts.php) - reiner Absatztext statt nummerierter Schritte,
daher eigene Anzeige-Klasse statt .schritt__text. */
.nutzungsbedingungen-text{ color:var(--ink-soft); font-size:14px; line-height:1.65; }
/* Der Text ist deutlich länger als die übrigen bearbeitbaren Textbausteine -
beim Bearbeiten bekommt das Eingabefeld darum mehr Platz statt der sonst
üblichen max-width:640px/min-height:90px (siehe .bearbeitbar__feld). */
.bearbeitbar:has(.nutzungsbedingungen-text) .bearbeitbar__feld{ max-width:100%; min-height:280px; }
/* Formular statt einfachem Knopf, weil Hinzufügen/Entfernen klassisch per
POST+Redirect läuft (wie die Status-Knöpfe in meine-angebote.php),
nicht per fetch() wie das reine Text-Bearbeiten oben. */
.schritt__entfernen-formular{ margin-left:auto; flex:none; }
.schritt__entfernen{
width:24px; height:24px; border-radius:50%; flex:none;
border:1px solid var(--line); background:var(--paper); color:var(--ink-soft);
font-size:16px; line-height:1; cursor:pointer;
display:flex; align-items:center; justify-content:center;
}
.schritt__entfernen:hover{ border-color:var(--accent-warm); color:var(--accent-warm); background:color-mix(in srgb, var(--accent-warm) 10%, var(--paper)); }
.schritte-gruppe__hinzufuegen-formular{ margin-top:16px; }
.schritte-gruppe__hinzufuegen{
width:100%; font-family:inherit; font-size:13px; font-weight:700; color:var(--accent-deep);
background:transparent; border:1.5px dashed var(--line); border-radius:9px;
padding:9px 14px; cursor:pointer;
}
.schritte-gruppe__hinzufuegen:hover{ border-color:var(--accent); background:var(--snow); }
/* ---------- form controls ---------- */
/* Kein fieldset:last-of-type-Sonderfall mehr: in neu.php ist "Zustand" das
letzte