/* Werbe-Dashboard, inspiriert von Salesforce Lightning (Bennys Wahl, 10.11.2026): dunkle Leiste links mit Symbol und
   Namen, Kopfleiste mit Suche in der Mitte, hellgraue Seite mit weißen Tafeln, runde Knöpfe, Fortschrittsleiste,
   Detailseite in drei Spalten, neues Objekt im Fenster. Farben von Priceless (Benny: „die Farbe, die zu seiner Firma
   passt“), Schrift Source Sans 3, Symbole von Lucide. Grün nur für „läuft“, Rot nur für Fehler. */
:root{
  /* Farben von Priceless Management (Logo und bisherige Seite, miles-and-cards/design_options.py „koralle“):
     Korallrot des Logos als einziger Akzent, auf Korallrot steht dunkle Schrift (weiße wäre zu schwach zu lesen). */
  --nacht:#1c1c1e; --akzent:#fc6a58; --akzent-dunkel:#e9584a; --akzent-hell:#feeae7;
  --tinte:#1c1c1e; --text:#2e2e30; --grau:#6a6a6a; --linie:#dddddd; --seite:#f4f4f2; --band:#f4f4f2; --grund:#ffffff;
  --gut:#2a7a45; --schlecht:#b42318; --runde:12px; --klein-rund:6px;
  --schrift:'Source Sans 3',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html{font-size:15px}
body{margin:0;background:var(--seite);color:var(--text);font-family:var(--schrift);line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:var(--tinte)}
h1{font-size:1.45rem;font-weight:600;line-height:1.2;margin:0;color:var(--tinte)}
h2{font-size:1.05rem;font-weight:600;margin:0;color:var(--tinte)}
h3{font-size:.95rem;font-weight:600;color:var(--tinte);margin:20px 0 8px}
p{margin:0 0 10px}
[hidden]{display:none!important}
.unsichtbar{position:absolute;left:-9999px}

/* ---- Rahmen: Leiste links, Kopf oben ---- */
.rahmen{display:flex;min-height:100vh}
.leiste{width:84px;flex:none;background:var(--nacht);display:flex;flex-direction:column;align-items:stretch;padding:8px 0;position:sticky;top:0;height:100vh}
.leiste a{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;color:#d9d9d6;text-decoration:none;font-size:.78rem;font-weight:600;text-align:center;line-height:1.15}
.leiste a svg{width:22px;height:22px}
.leiste a:hover{background:rgba(255,255,255,.08);color:#fff}
.leiste a[aria-current]{background:var(--akzent);color:var(--tinte)}
.leiste .neu-knopf{margin-top:auto}
.haupt{flex:1;min-width:0;display:flex;flex-direction:column}
.kopf{display:flex;align-items:center;gap:24px;height:56px;padding:0 20px;background:var(--grund);border-bottom:1px solid var(--linie)}
.marke{display:flex;align-items:center;gap:12px;font-weight:600;color:var(--grau);text-decoration:none;white-space:nowrap}
.marke img{height:30px;display:block}
.suche{flex:1;display:flex;justify-content:center;margin:0;position:relative}
.suchfeld{position:relative;width:100%;max-width:440px;margin:0}
.suchfeld svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--grau)}
.suchfeld input[type=search]{margin:0;padding-left:36px;border-radius:999px}
.kopf form{margin:0}
.abmelden{display:flex;align-items:center;gap:6px;background:none;border:0;font:inherit;color:var(--grau);cursor:pointer}
.abmelden svg{width:18px;height:18px}
.abmelden:hover{color:var(--tinte)}
.inhalt{padding:16px 20px 60px;width:100%;max-width:1600px}
.objekt-symbol{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--klein-rund);background:var(--akzent);color:var(--tinte);flex:none}
.objekt-symbol svg{width:16px;height:16px}
.objekt-symbol.gross{width:40px;height:40px}
.objekt-symbol.gross svg{width:22px;height:22px}
.mit-symbol{display:flex;gap:12px;align-items:center}

/* ---- Tafeln (die weißen Flächen) ---- */
.tafel{background:var(--grund);border:1px solid var(--linie);border-radius:var(--runde);padding:16px 18px;margin:0 0 14px}
.seitenkopf{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin:0 0 12px}
.tafel .seitenkopf{margin:0}
.liste .seitenkopf{margin-bottom:12px}
.art{font-size:.86rem;color:var(--grau);margin:0 0 2px}
.unter{color:var(--grau);margin:6px 0 0;max-width:640px}
.knopfgruppe{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.knopfgruppe form{margin:0}
.tafeln{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:12px;align-items:start}
.tafel.projekt{display:flex;flex-direction:column;padding:0}
.tafel-kopf{display:flex;gap:10px;align-items:center;padding:12px 16px}
.tafel-kopf h2{flex:1}
.tafel.projekt>.meldung,.tafel.projekt>dl,.tafel.projekt>figure,.tafel.projekt>table{margin-left:16px;margin-right:16px}
.tafel.projekt>table{width:calc(100% - 32px)}
.tafel-fuss{display:flex;justify-content:space-between;gap:10px;padding:10px 16px 12px;margin-top:auto;font-size:.9rem;color:var(--grau)}
.tafel-fuss a{color:var(--tinte);text-decoration:none;font-weight:600}
.tafel-fuss a:hover{text-decoration:underline}
a.tafel-fuss{color:var(--tinte);font-weight:600;text-decoration:none;padding:10px 0 0}
.brotkrumen{font-size:.86rem;color:var(--grau);margin:2px 0 8px}
.brotkrumen a{color:var(--grau)}

/* ---- Kennzahlen und Felder ---- */
.kennzahlen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 16px 0}
.kennzahlen dt,.felder dt{font-size:.84rem;color:var(--grau)}
.kennzahlen dd{margin:2px 0 0;font-size:1.5rem;font-weight:600;color:var(--tinte);font-variant-numeric:tabular-nums}
.felder{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px 20px;margin:16px 0 0;padding-top:14px;border-top:1px solid var(--linie)}
.felder.lang{grid-template-columns:repeat(5,minmax(0,1fr));border-top:0;padding-top:4px}
.felder dd{margin:2px 0 0;color:var(--tinte);font-weight:500;font-variant-numeric:tabular-nums}

/* ---- Fortschrittsleiste (nach dem „Path“ von Salesforce) ---- */
.pfad{display:flex;list-style:none;margin:16px 0 2px;padding:0;gap:4px}
.pfad li{flex:1;text-align:center;padding:7px 18px;background:var(--seite);color:var(--grau);font-weight:500;
         clip-path:polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%,12px 50%)}
.pfad li:first-child{clip-path:polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%)}
.pfad li.fertig{background:var(--akzent-hell);color:var(--tinte)}
.pfad li.jetzt{background:var(--akzent);color:var(--tinte);font-weight:700}

/* ---- Verlauf je Tag ---- */
.tagesverlauf{margin:16px 16px 0}
.tafel:not(.projekt) .tagesverlauf{margin:12px 0 0}
.balken-feld{display:flex;align-items:stretch;gap:2px;height:72px;border-bottom:1px solid var(--linie)}
.tagesverlauf.gross .balken-feld{height:180px}
.balken-feld span{flex:1;display:flex;align-items:flex-end}
.balken-feld span:hover i{background:var(--grau)}
.balken-feld i{display:block;width:100%;background:var(--akzent);border-radius:2px 2px 0 0}
.achse{display:flex;justify-content:space-between;gap:10px;font-size:.8rem;color:var(--grau);margin-top:4px}
.achse .wert{color:var(--tinte);font-weight:600}

/* ---- Knöpfe ---- */
.knopf{display:inline-block;background:var(--akzent);color:var(--tinte);border:1px solid var(--akzent);border-radius:999px;
       padding:7px 16px;font:inherit;font-weight:600;cursor:pointer;text-decoration:none;line-height:1.3}
.knopf:hover{background:var(--akzent-dunkel);border-color:var(--akzent-dunkel)}
.knopf.leise{background:var(--grund);color:var(--tinte);border-color:#c9c9c6}
.knopf.leise:hover{background:var(--seite)}
/* „Sofort starten“: dunkel statt rot, damit es sich vom Korallrot abhebt. Die Rückfrage vor dem Start bleibt. */
.knopf.rot{background:var(--tinte);border-color:var(--tinte);color:#fff}
.knopf.rot:hover{background:#000}
.knopf.klein{padding:4px 10px;font-size:.88rem}
.knopf.text{background:none;border:0;color:var(--tinte);padding:0;font-weight:600;border-radius:0;text-decoration:underline;text-decoration-color:var(--akzent);text-underline-offset:3px}
.knopf.text:hover{text-decoration:underline;background:none}
.knopf:disabled{opacity:.5;cursor:default}

/* ---- Meldungen ---- */
.meldung,.ergebnis{padding:9px 0 9px 12px;margin:10px 0;border-left:3px solid var(--gut);color:var(--tinte)}
.meldung.fehler,.ergebnis.fehler{border-left-color:var(--schlecht)}
.ergebnis ul{margin:6px 0 0;padding-left:18px}
.ergebnis .knopf{margin-top:10px}
.stand{color:var(--grau);font-size:.9rem;margin:2px 0 0}
.hinweis{color:var(--grau);font-size:.86rem;margin:8px 0 0;max-width:760px}
.leer{color:var(--grau)}

/* ---- Listen ---- */
.filterleiste{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:10px 0;border-top:1px solid var(--linie)}
.filterleiste input[type=search]{max-width:280px;margin:0}
.filterleiste .rechts{margin:0 0 0 auto}
label.still{display:flex;gap:8px;align-items:center;font-weight:400;color:var(--grau);margin:0}
label.still select{width:auto;margin:0}
select.ansicht{font:inherit;font-size:1.45rem;font-weight:700;border:0;padding:0 24px 0 0;margin:0;width:auto;background-color:transparent;color:var(--tinte)}
.tabelle{width:100%;border-collapse:collapse;margin:0}
.tabelle caption{text-align:left;font-weight:600;color:var(--tinte);padding:14px 0 6px}
.tabelle th{text-align:left;font-size:.86rem;color:var(--grau);font-weight:600;padding:8px 10px;background:#f8f8f6;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.tabelle th button{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer}
.tabelle th button[aria-sort=ascending]::after{content:" ↑"}
.tabelle th button[aria-sort=descending]::after{content:" ↓"}
.tabelle td{padding:9px 10px;border-bottom:1px solid var(--linie);vertical-align:top}
.tabelle tbody tr:hover td{background:#faf9f7}
.tabelle a{color:var(--tinte);text-decoration:underline;text-decoration-color:var(--akzent);text-underline-offset:3px;font-weight:600}
.tabelle a:hover{text-decoration:underline}
.tabelle.knapp td{padding:7px 0}
.tabelle .zahl{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.tabelle td.taten{text-align:right;white-space:nowrap}
.stand-laeuft{color:var(--gut);font-weight:600}
.stand-pausiert,.stand-beendet{color:var(--grau)}

/* ---- Formulare ---- */
label{display:block;font-size:.88rem;color:var(--tinte);font-weight:500}
label small{font-weight:400;color:var(--grau);font-size:.84rem}
input[type=text],input[type=password],input[type=date],input[type=url],input[type=number],input[type=search],select,textarea{
  display:block;width:100%;margin-top:4px;padding:7px 10px;border:1px solid #c9c9c6;border-radius:var(--klein-rund);background:#fff;
  color:var(--tinte);font:inherit;font-size:.95rem}
input[type=file]{display:block;margin-top:6px;font:inherit;font-size:.9rem}
textarea{resize:vertical;min-height:64px}
input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible{outline:2px solid var(--tinte);outline-offset:1px}
.formular{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px}
.formular .breit{grid-column:1/-1}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{font-size:.88rem;color:var(--tinte);font-weight:500;padding:0;margin-bottom:6px}
.haken{display:flex;gap:8px;align-items:center;font-weight:400;margin:4px 0}
.haken input{margin:0;accent-color:var(--tinte)}
.zeile{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:10px}
.schnellwahl{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 6px}
.auswahl{background:#fff;border:1px solid #c9c9c6;border-radius:999px;padding:5px 11px;font:inherit;font-size:.88rem;cursor:pointer;color:var(--tinte)}
.auswahl.an{background:var(--akzent);color:var(--tinte);border-color:var(--akzent)}
.stadt{margin:8px 0 0 25px;max-width:260px}
details.mehr summary{cursor:pointer;color:var(--tinte);font-weight:500;padding:6px 0}
details.mehr summary small{font-weight:400;color:var(--grau);margin-left:6px}
details.mehr[open] summary{margin-bottom:10px}
.foto-feld,.logo-feld{display:flex;gap:14px;align-items:flex-end;align-self:start}
.foto-feld img{width:96px;height:72px;object-fit:cover;background:var(--seite)}
.logo-feld img{width:52px;height:52px;object-fit:contain;background:var(--seite)}
.clip{margin-top:14px}
.clip video{display:block;max-width:100%;width:420px;max-height:380px;background:#000}
.budget-fenster{max-width:520px}
.budget-fenster h2{margin-bottom:12px}

/* ---- Umschalter Google-Suche / YouTube ---- */
.umschalter{display:grid;grid-template-columns:1fr 1fr;align-self:end}
.umschalter legend{grid-column:1/-1}
.umschalter label{margin:0}
.umschalter input{position:absolute;opacity:0;pointer-events:none}
.umschalter span{display:block;text-align:center;padding:7px;border:1px solid #c4c1ba;font-weight:600;cursor:pointer;background:#fff}
.umschalter label:first-of-type span{border-radius:999px 0 0 999px}
.umschalter label:last-of-type span{border-radius:0 999px 999px 0;border-left:0}
.umschalter input:checked+span{background:var(--akzent);border-color:var(--akzent);color:var(--tinte)}
.umschalter input:focus-visible+span{outline:2px solid var(--tinte);outline-offset:2px}

/* ---- Fenster für neue Werbung (Vorbild: Salesforce „New Campaign“) ---- */
.fenster{border:0;border-radius:var(--runde);padding:0;width:min(1080px,calc(100vw - 48px));max-height:calc(100vh - 48px);color:var(--text);background:#fff}
.fenster[open]{display:flex;flex-direction:column}
.fenster::backdrop{background:rgba(28,28,30,.55)}
.fenster-kopf{position:relative;padding:14px 24px;border-bottom:1px solid var(--linie);text-align:center}
.fenster-kopf h2{font-size:1.3rem;font-weight:500}
.schliessen{position:absolute;right:16px;top:50%;transform:translateY(-50%);background:none;border:0;font:inherit;color:var(--grau);cursor:pointer;text-decoration:underline}
.neu{display:flex;flex-direction:column;min-height:0;flex:0 1 auto}
.fenster-inhalt{overflow:auto;padding:0 24px 24px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start;flex:0 1 auto;min-height:0}
.band{background:var(--band);color:var(--tinte);font-size:1rem;font-weight:600;margin:20px 0 12px;padding:6px 12px;border-radius:var(--klein-rund)}
.neu-felder>label{margin-bottom:6px}
.neu-vorschau{position:sticky;top:20px;padding-top:20px}
.fenster-fuss{display:flex;gap:8px;justify-content:flex-end;align-items:center;padding:12px 24px;border-top:1px solid var(--linie);background:#f8f8f6}
.fenster-fuss .stand{margin-right:auto}
.fenster.als-seite{display:flex;flex-direction:column;width:auto;max-height:none;border:1px solid var(--linie)}
.fenster.als-seite .fenster-fuss{position:sticky;bottom:0}
form.neu[data-art=search] .nur-youtube,form.neu[data-art=youtube] .nur-suche{display:none!important}

/* ---- Vorschau der Anzeige ---- */
.vorschau-titel{font-size:.88rem;color:var(--grau);margin:0 0 8px}
.platzhalter{color:#a9a8a2!important}
.anzeige-google{background:var(--seite);padding:14px 16px;font-family:Arial,Helvetica,sans-serif;line-height:1.4;overflow-wrap:anywhere}
.anzeige-google p{margin:0}
.anzeige-google .gesponsert{font-weight:700;font-size:.8rem;color:#202124}
.anzeige-google .adresse{font-size:.85rem;color:#202124;margin:2px 0 4px}
/* Linkfarbe wie in Googles Ergebnisliste, nur hier in der Vorschau */
.anzeige-google .titel{font-size:1.1rem;color:#1a0dab;margin-bottom:4px}
.anzeige-google .text,.anzeige-google .plus{font-size:.86rem;color:#4d5156}
.anzeige-google .links{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-wrap:wrap;gap:4px 16px;color:#1a0dab;font-size:.86rem}
.anzeige-yt{background:var(--seite);padding:0 0 14px;overflow-wrap:anywhere}
.anzeige-yt .bild{aspect-ratio:16/9;background:#1b1b1a;color:#9c9b95;display:flex;align-items:center;justify-content:center;font-size:.85rem}
.anzeige-yt .bild img{width:100%;height:100%;object-fit:cover;display:block}
.anzeige-yt .unter-bild{display:flex;gap:10px;padding:12px 14px 6px;align-items:flex-start}
.anzeige-yt .logo{width:36px;height:36px;object-fit:cover;flex:none;border-radius:50%}
.anzeige-yt p{margin:0}
.anzeige-yt .titel{font-weight:600;color:var(--tinte)}
.anzeige-yt .klein{font-size:.8rem;color:var(--grau)}
.anzeige-yt .text{font-size:.86rem;padding:0 14px;color:var(--text)}

/* ---- Suchbegriffe und Einrichtung ---- */
.abschnitt{background:var(--grund);border:1px solid var(--linie);border-radius:var(--runde);padding:16px;margin:0 0 12px}
.abschnitt .seitenkopf h2{margin:0}
.schritte{padding-left:20px;max-width:700px}
.schritte li{margin:0 0 16px}
.schritte .innen{margin-top:8px}
.zahlen{display:flex;gap:40px;flex-wrap:wrap;margin:6px 0 22px}
.zahlen b{display:block;font-size:1.6rem;color:var(--tinte);font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums}
.zahlen span{color:var(--grau);font-size:.88rem}
.verlauf{display:inline-flex;align-items:flex-end;gap:2px;height:28px}
.verlauf i{width:5px;background:var(--akzent);display:block}
.reiter{display:flex;gap:22px;align-items:flex-end;margin:0 0 14px;border-bottom:1px solid var(--linie)}
.reiter button{background:none;border:0;padding:0 0 9px;font:inherit;color:var(--grau);cursor:pointer;margin-bottom:-1px;border-bottom:3px solid transparent}
.reiter button.an{color:var(--tinte);font-weight:600;border-bottom-color:var(--akzent)}
.reiter .rechts{margin:0 0 8px auto}
#kwErgebnis{margin-top:20px}

/* ---- Anmeldung ---- */
.login-seite{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.login-karte{width:100%;max-width:360px;background:#fff;border:1px solid var(--linie);border-radius:var(--runde);padding:28px}
.login-karte .marke{font-size:1.3rem}
.login-karte p{color:var(--grau);margin:4px 0 22px}
.login-karte label{margin-bottom:16px}
.knopf.voll{width:100%;text-align:center;padding:10px}

@media (max-width:900px){
  .rahmen{flex-direction:column}
  .leiste{width:auto;height:auto;position:sticky;top:0;z-index:5;flex-direction:row;padding:0;order:2;bottom:0}
  .leiste a{flex:1;padding:8px 2px}
  .leiste .neu-knopf{margin-top:0}
  .kopf{gap:12px;padding:0 12px}
  .marke{display:none}
  .suchfeld{max-width:none}
  .abmelden span{display:none}
  .drei-spalten{grid-template-columns:minmax(0,1fr)}
  .inhalt{padding:10px 8px 50px}
  .formular,.felder,.felder.lang{grid-template-columns:repeat(2,minmax(0,1fr))}
  .formular{grid-template-columns:minmax(0,1fr)}
  .fenster{width:100vw;max-width:100vw;height:100%;max-height:100%;margin:0;border-radius:0}
  .fenster-inhalt{grid-template-columns:minmax(0,1fr);padding:0 14px 20px}
  .neu-vorschau{position:static}
  .fenster-fuss{flex-wrap:wrap;padding:10px 14px}
  .filterleiste .rechts{margin:0}
  .pfad li{padding:7px 8px 7px 16px;font-size:.86rem}
  .tabelle thead{display:none}
  .tabelle,.tabelle tbody,.tabelle tr,.tabelle td{display:block}
  .tabelle tr{padding:10px 0;border-bottom:1px solid var(--linie)}
  .tabelle td,.tabelle td.taten,.tabelle.knapp td{padding:2px 0;border:0;text-align:left!important;white-space:normal;overflow-wrap:anywhere}
  .tabelle td[data-name]::before{content:attr(data-name) ": ";color:var(--grau)}
}

/* ---- Detailseite: drei Spalten wie bei Salesforce ---- */
.kopf-tafel .seitenkopf{margin:0}
.drei-spalten{display:grid;grid-template-columns:minmax(260px,1fr) minmax(0,2fr) minmax(260px,1fr);gap:14px;align-items:start}
.spalten-titel{font-size:1.05rem;margin:0 0 10px}
.spalten-kopf{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px}
.spalten-kopf .spalten-titel{margin:0}
.angaben{margin:0}
.angaben div{padding:8px 0;border-bottom:1px solid var(--linie)}
.angaben dt{font-size:.84rem;color:var(--grau)}
.angaben dd{margin:2px 0 0;color:var(--tinte)}
.kopf-tafel .kennzahlen,.drei-spalten .kennzahlen{margin:6px 0 0}
.verwandt{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--linie)}
.verwandt a{color:var(--tinte);font-weight:600;text-decoration:none}
.verwandt a:hover{text-decoration:underline}
.verwandt small{display:block;color:var(--grau)}