/* Kundenbereich apeice — Gestaltung. Übernommen aus dem Entwurf (vierte Fassung, 19.09.2026, aus dem apeice-Farbbogen), mit drei Unterschieden: 1. **Die Schriften kommen vom eigenen Server.** Der Entwurf lud sie bei Google. Auf www.apeice.de ist das verboten — die Datenschutzerklärung verspricht, dass nichts von fremden Servern nachgeladen wird, und hochladen.sh bricht ab, wenn doch. Für den Kundenbereich gilt dasselbe Versprechen. Poppins und Caveat Brush liegen schon unter /assets/fonts, dieselbe Herkunft, kein fremder Aufruf. 2. Die Entwurfsleiste ist weg. 3. Dazugekommen: Anmeldeseite, Anfrageformulare, Logo-Feld, Meldungen. Die sechs Farben vom Bogen sind Flächenfarben aus einer Illustration — als Schrift fallen sie durch. Deshalb steht jede zweimal da: einmal als Fläche im Original, einmal als abgedunkelte Fassung desselben Farbtons für den Text darauf. #5d5059 Pflaume -> Fließtext (7,6:1 auf Weiß) #a69a9c Warmgrau -> nur Linien, nie Text (auf Weiß nur 3,0:1) #8bd8c4 Mint -> „erledigt" #d7674f Terrakotta-> „du bist dran"; als Schrift zu hell, deshalb #A8452C für Knöpfe #acc6dd Hellblau -> Symbolflächen bei den Unterlagen #fcf1c2 Creme -> die zwei Stellen, an denen der Bereich Verkaufsseite sein darf Dazu seit dem 23.09.2026 Mint aus der Website-Palette (_Web-Assets/Markenfarben.md): #8bd8c4 Mint, #ecf9f6 Mint hell -> die BrandPass-Karte, wie der BrandPass- Abschnitt auf www.apeice.de. Vorher war sie gelb wie „Creme“ und fiel neben den weißen Karten heraus. Bewusst **kein dunkler Modus**: Der Kundenbereich ist hell, egal was das Gerät eingestellt hat. Deshalb color-scheme: light. */ @font-face { font-family: "Caveat Brush"; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/caveat-brush.woff2) format("woff2"); } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 300; font-display: swap; src: url(assets/fonts/poppins-300-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 300; font-display: swap; src: url(assets/fonts/poppins-300-latin-ext.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: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/poppins-400-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/poppins-400-latin-ext.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: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/poppins-500-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/poppins-500-latin-ext.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: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url(assets/fonts/poppins-600-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url(assets/fonts/poppins-600-latin-ext.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: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url(assets/fonts/poppins-700-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { color-scheme: light; --grund: #EFE9ED; --karte: #FFFFFF; --text: #5D5059; --stark: #3D343B; --leise: #6E6266; --linie: #DED4D9; --akzent: #A8452C; --knopftext: #FFFFFF; --gut: #DFF2EA; --gutText: #1E5A44; --gutMarke: #8BD8C4; --achtung:#F7E0DA; --achtungText: #8F3822; --achtungMarke: #D7674F; --info: #ACC6DD; --warm: #FCF1C2; --warmLinie: #EFDFA6; --mint: #8BD8C4; --mintHell: #ECF9F6; --mintLinie: #BFE7DB; --schrift: "Poppins", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif; --hand: "Caveat Brush", "Segoe Print", cursive; --breite: 62rem; --rand: clamp(1rem, 4vw, 2.5rem); --r-s: .75rem; --r-m: 1.25rem; --r-pill: 999px; --schatten: 0 1px 2px rgb(61 52 59 / .06), 0 10px 26px rgb(61 52 59 / .08); --weich: .2s cubic-bezier(.2, .7, .2, 1); } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--schrift); font-weight: 300; font-size: 1.0625rem; line-height: 1.7; color: var(--text); background: var(--grund); -webkit-font-smoothing: antialiased; } :where(a, button, input, summary):focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; border-radius: var(--r-s); } img, svg { display: block; max-width: 100%; } h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.2; color: var(--stark); text-wrap: balance; } h1 { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.8rem); } h2 { font-size: clamp(1.2rem, 1.05rem + .7vw, 1.45rem); } h3 { font-size: 1.02rem; } p { margin: 0 0 .9rem; text-wrap: pretty; } p:last-child { margin-bottom: 0; } a { color: inherit; } /* Poppins 300 franst unter 15px aus — und genau da steht das Kleingedruckte zur Anzahlung. Deshalb 14px in 400. display:block, weil small sonst inline neben den nächsten Knopf rutscht. */ small { display: block; font-size: .875rem; font-weight: 400; color: var(--leise); } /* ── Kopf ────────────────────────────────────────────────────────────────── */ /* Bleibt seit dem 22.09.2026 beim Scrollen stehen, damit die Sprungleiste immer erreichbar ist. Auf einem Handy ist jede Zeile, die dauerhaft steht, eine Zeile weniger fuer den Inhalt - deshalb rueckt die Polsterung dort enger zusammen. */ .kopf { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--linie); background: var(--karte); } .kopf-innen { max-width: var(--breite); margin: 0 auto; padding: .9rem var(--rand) .8rem; display: flex; align-items: center; gap: 1rem; } /* Steht eine Leiste darunter, traegt sie die untere Polsterung. */ .kopf:has(.sprungleiste:not([hidden])) .kopf-innen { padding-bottom: .1rem; } /* ── Sprungleiste ────────────────────────────────────────────────────────── */ /* Bis zu sieben Eintraege. Auf schmalen Geraeten darf sie waagerecht gescrollt werden, statt zu brechen: eine zweizeilige Leiste im stehenden Kopf frisst zu viel Platz. Den aktuellen Eintrag holt bereich.js in den sichtbaren Bereich. */ .sprungleiste { display: flex; gap: .3rem; overflow-x: auto; scrollbar-width: none; max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand) .55rem; scroll-behavior: smooth; } .sprungleiste::-webkit-scrollbar { display: none; } .sprungleiste a { flex: none; padding: .28rem .75rem; border: 1px solid transparent; border-radius: var(--r-pill); color: var(--leise); text-decoration: none; font-size: .82rem; font-weight: 400; white-space: nowrap; } .sprungleiste a:hover { border-color: var(--linie); color: var(--stark); } /* Terrakotta als Flaeche, nicht als Schrift: als Schrift kommt sie auf Weiss nur auf 3,4:1. Auf der Flaeche steht Weiss - dieselbe Paarung wie beim Knopf. */ .sprungleiste a.hier { background: var(--akzent); border-color: var(--akzent); color: var(--knopftext); } /* Auf dem Handy war der stehende Kopf 137 px hoch — 17 % des Schirms, dauerhaft. Der Grund war nicht die Leiste, sondern der Firmenname: Er brach auf drei Zeilen um ("TESTLAUF / alveare food / GmbH"). Zwei Aenderungen, beide nur hier unten: - Das Wort "Kundenbereich" faellt weg. Es steht schon im Reitertitel, und die Sprungleiste sagt ohnehin, wo man ist. - Der Firmenname bleibt auf einer Zeile und endet notfalls mit Punkten. Er ist da, um zu bestaetigen, in welchem Zugang man steckt — dafuer reicht der Anfang. */ @media (max-width: 34rem) { .kopf .bereich { display: none; } .kopf .nutzer b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } .marke { display: flex; align-items: baseline; gap: .1rem; margin-right: auto; text-decoration: none; } .wortmarke { font-weight: 700; font-size: 1.15rem; line-height: 1; color: var(--stark); } .wortmarke span { padding: 0 .1em .05em; border-radius: .12em; background: var(--stark); color: var(--karte); } .bereich { margin-left: .55rem; padding-left: .6rem; border-left: 1px solid var(--linie); font-size: .95rem; color: var(--leise); } /* min-width: 0, sonst greift die Ellipse beim Firmennamen nie: Ein Flex-Element ist mindestens so breit wie sein Inhalt, und die Seite scrollte am Handy seitlich. */ .kopf .nutzer { font-size: .9rem; text-align: right; line-height: 1.35; min-width: 0; } .kopf .nutzer b { display: block; font-weight: 500; color: var(--stark); } .kopf .nutzer button { padding: .2rem 0; min-height: 1.6rem; border: 0; background: none; font: inherit; font-size: .85rem; color: var(--akzent); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; } main { max-width: var(--breite); margin: 0 auto; padding: 2rem var(--rand) 4rem; } /* Der Abstand oben sorgt dafuer, dass der stehende Kopf die Ueberschrift des angesprungenen Abschnitts nicht verdeckt. */ section { margin-bottom: 2.75rem; scroll-margin-top: 7.5rem; } /* Obere Karten mit Schatten, Listen- und Tabellenkarten nur mit Linie: Karte gegen Grund liegt bei 1,12:1 und ist auf hellen Bildschirmen sonst praktisch unsichtbar. */ .karte { background: var(--karte); border-radius: var(--r-m); border: 1px solid var(--linie); padding: 1.6rem; } @media (max-width: 40rem) { .karte { padding: 1.25rem; } } .karte.gehoben { box-shadow: var(--schatten); } /* Sätze nicht über die ganze Breite laufen lassen — über 100 Zeichen liest sich wie AGB. */ .karte > p { max-width: 34rem; } .abschnittskopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .2rem 1rem; margin-bottom: 1.1rem; } /* ── Begrüßung und Eckdaten ──────────────────────────────────────────────── */ .hallo { font-family: var(--hand); font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.6rem); color: var(--stark); line-height: 1.1; } .untertitel { margin-top: .35rem; color: var(--text); } .eckdaten { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 1rem 1.4rem; margin-top: 1.2rem; } .eckdaten > div { min-width: 0; } /* Keine gesperrten Versalien: Das war der amtlichste Griff im ganzen Entwurf. */ .eckdaten dt { font-size: .82rem; font-weight: 400; color: var(--leise); } .eckdaten dd { margin: .15rem 0 0; font-weight: 500; color: var(--stark); } /* Tippfläche: Mit padding 0 war der Link auf dem Handy nur so hoch wie seine Schrift. Die Polsterung vergrößert die Fläche, nicht den Abstand. */ .eckdaten .aendern { display: inline-block; margin: .1rem 0 0 -.2rem; padding: .3rem .2rem; min-height: 1.75rem; border: 0; background: none; font: inherit; font-size: .82rem; font-weight: 400; color: var(--akzent); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; } .abzeichen { display: inline-block; padding: .2rem .7rem; border-radius: var(--r-pill); font-size: .82rem; font-weight: 500; background: var(--gut); color: var(--gutText); } .abzeichen.warnung { background: var(--achtung); color: var(--achtungText); } /* Mehrere Events: eine schlichte Reiterleiste über der Karte. */ .termine { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; } .termine button { display: grid; text-align: left; line-height: 1.3; font: inherit; font-size: .88rem; font-weight: 400; padding: .45rem .95rem; border-radius: var(--r-s); border: 1px solid var(--linie); background: var(--karte); color: var(--text); cursor: pointer; } .termine button .name { font-weight: 500; color: var(--stark); } .termine button .wann { font-size: .8rem; color: var(--leise); } .termine button[aria-pressed="true"] { border-color: var(--stark); background: var(--stark); color: var(--karte); } .termine button[aria-pressed="true"] .name, .termine button[aria-pressed="true"] .wann { color: var(--karte); } /* ── Kundenreise ─────────────────────────────────────────────────────────── */ .reise { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; } .reise li { display: grid; grid-template-columns: 1.6rem 1fr; gap: .9rem; } .reise .spur { position: relative; display: flex; justify-content: center; } .reise .spur::before { content: ""; position: absolute; top: 1.7rem; bottom: -.1rem; width: 2px; background: var(--linie); } /* Mint als zweiter, farbunabhängiger Träger für „erledigt" — neben dem Haken. */ .reise .fertig .spur::before { background: var(--gutMarke); } .reise li:last-child .spur::before { display: none; } .punkt { position: relative; z-index: 1; margin-top: .5rem; width: 1.45rem; height: 1.45rem; border-radius: 50%; display: grid; place-items: center; background: var(--karte); border: 2px solid var(--linie); font-size: .78rem; font-weight: 600; color: var(--leise); } .reise .fertig .punkt { background: var(--gutMarke); border-color: var(--gutMarke); color: var(--gutText); } .punkt .ikon { width: .85rem; height: .85rem; stroke-width: 3; } /* Terrakotta trägt den Ring, nicht die Ziffer: Weiß auf #D7674F kommt nur auf 3,5:1. */ .reise .jetzt .punkt { background: var(--achtung); border-color: var(--achtungMarke); color: var(--achtungText); box-shadow: 0 0 0 4px color-mix(in srgb, var(--achtungMarke) 22%, transparent); } .reise .inhalt { padding: .4rem 0 1.05rem; } .reise li:last-child .inhalt { padding-bottom: 0; } .reise .titel { font-weight: 500; color: var(--stark); } .reise .jetzt .titel { font-weight: 600; } .reise .kommt .titel { color: var(--leise); } .reise .wann { font-size: .85rem; color: var(--leise); } .reise .was { margin-top: .1rem; font-size: .95rem; color: var(--text); } .reise .kommt .was { color: var(--leise); } .duBistDran { display: inline-block; margin-top: .4rem; padding: .15rem .6rem; border-radius: var(--r-pill); background: var(--achtung); color: var(--achtungText); font-size: .8rem; font-weight: 500; } /* Der kleine Weg zur Bewertung an Station 8 — unter dem Satz, nicht daneben. Plakette und Knopf teilen sich eine Zeile mit Abstand (23.09.2026). */ .reise-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; margin-top: .55rem; } .reise-zeile .duBistDran { margin-top: 0; } /* ── Aufgaben ────────────────────────────────────────────────────────────── */ .aufgaben { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; } .aufgaben li { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: .9rem 1rem; border-radius: var(--r-s); background: var(--karte); border: 1px solid var(--linie); } .aufgaben .text { flex: 1 1 14rem; min-width: 0; } .aufgaben .text b { display: block; font-weight: 500; color: var(--stark); } .aufgaben .text small { display: block; color: var(--leise); } /* Genau eine Aufgabe pro Seite darf die Signalfarbe tragen: die wirklich fällige. */ .aufgaben li.faellig { background: var(--achtung); border-color: var(--achtungText); } .aufgaben li.faellig .text b, .aufgaben li.faellig .text small { color: var(--achtungText); } /* Die Angebote unter „Noch was dazu?“ liegen auf der warmen Karte. */ .aufgaben li.warm { background: var(--karte); border-color: var(--warmLinie); } .kopieren { flex-basis: 100%; display: grid; gap: .5rem; justify-items: start; } .kopieren textarea { width: 100%; font: inherit; font-size: .9rem; font-weight: 400; line-height: 1.5; color: var(--stark); padding: .6rem .8rem; border-radius: var(--r-s); border: 1px solid var(--warmLinie); background: var(--warm); resize: vertical; } /* ── Knöpfe ──────────────────────────────────────────────────────────────── */ .knopf { display: inline-flex; align-items: center; gap: .45rem; font: inherit; font-weight: 500; font-size: .94rem; padding: .5rem 1.15rem; border-radius: var(--r-pill); border: 1px solid var(--akzent); background: transparent; color: var(--akzent); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background var(--weich), color var(--weich); } .knopf.voll { background: var(--akzent); color: var(--knopftext); } /* Ruhiger Hover: ein Millimeter nach oben, kein springender Schatten. */ @media (hover: hover) { .knopf:hover { background: color-mix(in srgb, var(--akzent) 12%, transparent); transform: translateY(-1px); } .knopf.voll:hover { background: color-mix(in srgb, var(--akzent) 85%, #000); } } .knopf:disabled { opacity: .45; cursor: not-allowed; transform: none; } /* ── Symbole ─────────────────────────────────────────────────────────────── */ /* Das Sprite in bereich.html steht nur als Vorlage da. Nicht display:none — manche Browser zeichnen dann auch die -Kopien nicht. */ .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } /* Linien in der Schriftfarbe, eine Spur größer als der Text daneben. Die Eigenschaften erben in die -Kopie hinein; das LinkedIn-Symbol ist gefüllt und setzt fill/stroke selbst. */ .ikon { flex: none; display: block; width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .knopf .ikon { margin-left: -.15rem; } .knopf.klein .ikon { width: 1.1em; height: 1.1em; } /* LinkedIn-Blau per Klasse: Auf der Website stand es als style-Attribut, das die CSP hier nicht zulässt. */ .ikon.linkedin { color: #0A66C2; } .mit-ikon { display: flex; align-items: center; gap: .55rem; } .mit-ikon .ikon { width: 1.5rem; height: 1.5rem; } /* ── Unterlagen ──────────────────────────────────────────────────────────── */ /* Seit dem 23.09.2026 Kacheln statt Zeilen: Die ganze Kachel ist der Link, das Symbol hat je Art eine Farbe, und der Zahlstand steht als Plakette daneben — „offen“ findet man auf einen Blick, ohne jede Zeile zu lesen. */ .dateien { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; } /* Unter 375 px lief die Liste aus der Karte: Ein Rasterelement ist so breit wie sein laengstes Wort. minmax(0, …) laesst die Kachel schrumpfen, die Silben- trennung (lang="de" steht im html) bricht „Auftragsbestätigung“ sauber um. */ .dateien { grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); } .aufgaben { grid-template-columns: minmax(0, 1fr); } .dateien li.leer { grid-column: 1 / -1; color: var(--text); } .einleitung { margin: 0 0 1rem; font-size: .95rem; color: var(--leise); } .dateien a.datei { display: flex; align-items: center; gap: .8rem; height: 100%; padding: .8rem .9rem; border-radius: var(--r-s); border: 1px solid var(--linie); background: var(--karte); color: inherit; text-decoration: none; transition: border-color var(--weich), box-shadow var(--weich), transform var(--weich); } @media (hover: hover) { .dateien a.datei:hover { border-color: var(--akzent); box-shadow: var(--schatten); transform: translateY(-1px); } } .dateien .symbol { flex: none; width: 2.6rem; height: 2.6rem; border-radius: .8rem; display: grid; place-items: center; background: #DCE7F1; font-size: 1.15rem; } .dateien .symbol.art-ab { background: var(--gut); } .dateien .symbol.art-rechnung { background: var(--warm); } .dateien .symbol.art-kalender { background: var(--achtung); } .dateien .text { flex: 1 1 auto; min-width: 0; } .dateien .text b { display: block; font-weight: 500; color: var(--stark); line-height: 1.3; } .dateien .text small { margin-top: .1rem; font-size: .82rem; } .dateien .text b, .aufgaben .text b { hyphens: auto; overflow-wrap: break-word; } .dateien .laden { flex: none; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; font-weight: 600; background: color-mix(in srgb, var(--akzent) 10%, transparent); color: var(--akzent); } .dateien .laden .ikon { width: 1.05rem; height: 1.05rem; } /* Plaketten: Zahlstand an den Unterlagen, Vorteil an den Angeboten. */ .plakette { flex: none; display: inline-block; padding: .15rem .6rem; border-radius: var(--r-pill); font-size: .76rem; font-weight: 600; line-height: 1.4; white-space: nowrap; } .plakette.gut { background: var(--gut); color: var(--gutText); } .plakette.offen { background: var(--warm); color: #6B5200; } .plakette.faellig { background: var(--achtung); color: var(--achtungText); } .plakette.warm { background: var(--akzent); color: var(--knopftext); } .plakette.gedruckt { background: var(--stark); color: var(--karte); } /* „herunterladen“ steht für Vorleseprogramme am Link (.nur-vorlesen, ganz unten). */ /* Datum und Zahlstand in einer Zeile unter dem Namen — neben dem Namen blieb dem bei drei Spalten nur ein Streifen, „Anzahlungsrechnung“ zerfiel in vier Teile. */ .dateien .unterzeile { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .5rem; margin-top: .15rem; } .dateien .unterzeile small { margin: 0; } /* ── Noch was dazu? ──────────────────────────────────────────────────────── */ /* Bis zum 23.09.2026 eine Liste auf gelbem Grund, die aussah wie noch mehr Aufgaben. Jetzt Karten mit einem Polaroid von der Website: Das hier ist das Angebot, nicht die Pflicht. */ .angebote { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); } .angebot { position: relative; display: flex; flex-direction: column; gap: .9rem; padding: 1.2rem 1.2rem 1.3rem; border-radius: var(--r-m); background: var(--karte); border: 1px solid var(--linie); box-shadow: var(--schatten); } .angebot:nth-child(3n+1) { background: linear-gradient(180deg, var(--warm), var(--karte) 60%); border-color: var(--warmLinie); } .angebot:nth-child(3n+2) { background: linear-gradient(180deg, var(--gut), var(--karte) 60%); } .angebot:nth-child(3n) { background: linear-gradient(180deg, #F6EBDD, var(--karte) 60%); } .angebot.breit { grid-column: 1 / -1; flex-direction: row; align-items: flex-start; gap: 1.4rem; } .angebot .polaroid { flex: none; margin: 0; width: 6.5rem; padding: .35rem .35rem 1.1rem; background: #fff; border-radius: .2rem; rotate: -4deg; box-shadow: 0 1px 2px rgb(61 52 59 / .12), 0 10px 22px rgb(61 52 59 / .16); } .angebot:nth-child(2n) .polaroid { rotate: 3deg; } .angebot .polaroid img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: .15rem; } .angebot .inhalt { display: flex; flex-direction: column; gap: .6rem; flex: 1 1 auto; min-width: 0; } .angebot-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; } .angebot h3 { font-size: 1.12rem; } .angebot p { margin: 0; font-size: .95rem; } .angebot .inhalt > .knopf { align-self: flex-start; margin-top: auto; } .angebot .kopieren textarea { background: var(--karte); } .kopieren .knopfzeile { display: flex; flex-wrap: wrap; gap: .5rem; } @media (max-width: 40rem) { .angebot.breit { flex-direction: column; } } /* ── BrandPass ───────────────────────────────────────────────────────────── */ /* Seit dem 23.09.2026 weiß mit Mint statt gelb (Joshua: „das Gelb bei BrandPass nicht so hübsch wie bei den anderen“): oben ein Hauch Mint hell wie der BrandPass-Abschnitt der Website, darüber eine Mint-Kante. Die Kästen darin tragen dasselbe Mint statt Gelb. */ .bpkarte { position: relative; box-shadow: var(--schatten); border-color: var(--mintLinie); background: linear-gradient(180deg, var(--mintHell), var(--karte) 14rem); } .bpkarte::before { content: ""; position: absolute; top: -1px; left: 1.4rem; right: 1.4rem; height: .3rem; border-radius: 0 0 var(--r-pill) var(--r-pill); background: var(--mint); } .bp-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; } .balken { height: .45rem; border-radius: var(--r-pill); background: var(--mintHell); box-shadow: inset 0 0 0 1px var(--mintLinie); overflow: hidden; margin: .9rem 0 .4rem; } .balken i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--mint); } .bp-liste { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .3rem; font-size: .95rem; } .bp-liste li { display: flex; gap: .55rem; } .bp-liste li::before { content: "✓"; color: var(--gutText); font-weight: 600; } .bp-liste li.fehlt { color: var(--leise); } .bp-liste li.fehlt::before { content: "+"; color: var(--akzent); } .wahl { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); margin-top: 1.2rem; } .wahl > div { padding: 1.1rem; border: 1px solid var(--mintLinie); border-radius: var(--r-s); background: var(--karte); } .wahl .preis { font-weight: 600; color: var(--stark); font-size: 1.15rem; margin: 0 0 .5rem; } .wahl .knopf { margin-top: .8rem; } .hinweisfeld { margin-top: 1rem; padding: .8rem 1rem; border-radius: var(--r-s); background: var(--karte); border: 1px solid var(--linie); font-size: .92rem; color: var(--text); } .bpkarte .hinweisfeld { background: var(--mintHell); border-color: var(--mintLinie); } /* Upgrade und Verlängerung: Text und Knopf in EINEM Kasten, mit Luft darüber und darunter. Vorher klebte der Knopf ohne Abstand unter dem Kasten und am unteren Kartenrand. */ .bp-kasten { margin-top: 1.5rem; padding: 1.1rem 1.2rem 1.25rem; } .bp-kasten h3 { margin-bottom: .4rem; } .bp-kasten p { margin: 0; max-width: 40rem; } .bp-kasten > .knopf { margin-top: 1rem; } /* Kopf der BrandPass-Karte: links Stand und Laufzeit, rechts zwei Symbolbilder als Polaroids (seit 23.09.2026: Cheesecake und Waffel). Auf dem Handy stehen sie darunter nebeneinander. */ .bp-oben { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1rem 1.6rem; } .bp-links { flex: 1 1 18rem; min-width: 0; } .bp-bilder { flex: 0 1 auto; display: flex; gap: .8rem; margin: 0 .3rem 0 auto; } .bp-bild { flex: 0 0 auto; width: 10.5rem; margin: 0; padding: .4rem .4rem 0; background: #fff; border-radius: .2rem; rotate: 2.5deg; box-shadow: 0 1px 2px rgb(61 52 59 / .12), 0 12px 26px rgb(61 52 59 / .16); } .bp-bild:first-child { rotate: -2.5deg; } .bp-bild img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: .15rem; } .bp-bild figcaption { padding: .35rem .1rem .5rem; font: 1rem/1.1 var(--hand); color: var(--stark); text-align: center; } /* Das Bild ist ein Knopf: Ein Klick zeigt es groß (Lichtbox). Die Lupe unten rechts sagt, dass das geht. */ .bp-bild-knopf { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; } .lupe { position: absolute; right: .35rem; bottom: .35rem; width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center; background: rgb(255 255 255 / .92); color: var(--stark); box-shadow: 0 1px 4px rgb(0 0 0 / .18); transition: transform var(--weich); } .lupe .ikon { width: 1rem; height: 1rem; } @media (hover: hover) { .bp-bild-knopf:hover .lupe { transform: scale(1.1); } } @media (max-width: 40rem) { .bp-bilder { margin: 0 auto; width: 100%; justify-content: center; } .bp-bild { width: calc(50% - .5rem); max-width: 11rem; } } /* ── Eure Fotos ──────────────────────────────────────────────────────────── */ /* Seit dem 23.09.2026 groß und unbeschnitten: Zeilen gleicher Höhe, jedes Foto so breit, wie sein Seitenverhältnis (--quer, von bereich.js aus b/h) es verlangt, danach wächst die Zeile auf volle Breite. Vorher Quadrate von 8,5 rem, auf die Mitte zugeschnitten — Köpfe fehlten, Querformate wurden zu Streifen. Der Nachläufer (::after) hält die letzte Zeile in Normalhöhe, statt ein einzelnes Foto über die ganze Breite aufzublasen. */ .fotos { --zeile: 14rem; list-style: none; margin: 1.1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; } .fotos::after { content: ""; flex: 999 1 0; } /* Alle Fotos in der Probeansicht entfernt: kein leerer Abstand über dem Hochladefeld. */ .fotos:empty { display: none; } .fotos li { position: relative; flex: var(--quer, 1.5) 1 calc(var(--quer, 1.5) * var(--zeile)); min-width: 0; } @media (max-width: 40rem) { .fotos { --zeile: 8rem; gap: .45rem; } } .foto-gross { display: block; width: 100%; padding: 0; border: 0; border-radius: var(--r-s); overflow: hidden; background: var(--linie); cursor: zoom-in; } .foto-gross img { display: block; width: 100%; height: auto; transition: transform var(--weich); } @media (hover: hover) { .foto-gross:hover img { transform: scale(1.03); } } .foto-laden { position: absolute; right: .45rem; bottom: .45rem; width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center; text-decoration: none; background: rgb(255 255 255 / .92); color: var(--akzent); box-shadow: 0 1px 4px rgb(0 0 0 / .2); } .foto-laden .ikon { width: 1.05rem; height: 1.05rem; } #fotos .knopfzeile { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; } #fotos .knopfzeile small { margin: 0; } /* ── Lichtbox ────────────────────────────────────────────────────────────── */ /* Ganzer Bildschirm, dunkel, oben der Zähler und rechts die Knöpfe, das Bild so groß, wie es passt. Während sie offen ist, scrollt die Seite dahinter nicht mit. */ :root:has(.lichtbox[open]) { overflow: hidden; } .lichtbox { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; color: #fff; background: #1D181C; overflow: hidden; } .lichtbox[open] { display: grid; grid-template-rows: auto auto minmax(0, 1fr); } /* Feste Zeilen: Ein verstecktes Element ist kein Rasterelement — ohne sie rutschte die Bühne in die Zeile des Hinweises und war null Pixel hoch. */ .lb-leiste { grid-row: 1; } .lb-hinweis { grid-row: 2; } .lb-buehne { grid-row: 3; } .lichtbox::backdrop { background: rgb(29 24 28 / .5); } .lichtbox :focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .lb-leiste { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .7rem clamp(.7rem, 2.5vw, 1.4rem); } .lb-zaehler { font-size: .95rem; font-weight: 500; color: rgb(255 255 255 / .85); font-variant-numeric: tabular-nums; } .lb-aktionen { display: flex; align-items: center; gap: .5rem; } .lb-knopf { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 2.75rem; padding: .45rem 1.05rem; border-radius: var(--r-pill); border: 1px solid rgb(255 255 255 / .3); background: rgb(255 255 255 / .08); color: #fff; font: inherit; font-size: .9rem; font-weight: 500; text-decoration: none; cursor: pointer; transition: background var(--weich); } @media (hover: hover) { .lb-knopf:hover { background: rgb(255 255 255 / .2); } } .lb-knopf:disabled { opacity: .5; cursor: wait; } .lb-rund { width: 2.75rem; padding: 0; } .lb-rund .ikon { width: 1.3rem; height: 1.3rem; } .lb-weg { border-color: rgb(247 224 218 / .55); } .lb-hinweis { margin: 0 clamp(.7rem, 2.5vw, 1.4rem) .6rem; padding: .55rem .8rem; border-radius: var(--r-s); background: var(--achtung); color: var(--achtungText); font-size: .9rem; } .lb-buehne { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .6rem; min-height: 0; padding: 0 clamp(.5rem, 2.5vw, 1.4rem) clamp(.7rem, 2.5vw, 1.4rem); } /* Das Bild füllt die ganze Bühne und passt sich mit object-fit ein: Wenn die große Fassung die Vorschau ablöst, springt nichts. */ .lb-rahmen { position: relative; margin: 0; width: 100%; height: 100%; min-height: 0; } .lb-rahmen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; } /* Auf dem Handy bekommt das Bild die volle Breite: Vor und Zurück liegen als runde Knöpfe darüber, und oben stehen nur die Symbole. */ @media (max-width: 40rem) { .lb-buehne { position: relative; grid-template-columns: minmax(0, 1fr); padding: 0 0 .7rem; } .lb-zurueck, .lb-vor { position: absolute; top: 50%; z-index: 1; translate: 0 -50%; background: rgb(29 24 28 / .55); } .lb-zurueck { left: .4rem; } .lb-vor { right: .4rem; } .lb-aktionen .knopftext { display: none; } .lb-aktionen .lb-knopf { width: 2.75rem; padding: 0; } .lb-aktionen .ikon { width: 1.25rem; height: 1.25rem; } } /* LinkedIn-Vorlagen im BrandPass: aufklappbar, damit zwei lange Texte die Karte nicht zur Textwand machen. */ .vorlagen { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px dashed var(--mintLinie); } .vorlagen > p { margin: .35rem 0 .9rem; font-size: .95rem; } .vorlage { margin-top: .6rem; border: 1px solid var(--mintLinie); border-radius: var(--r-s); background: var(--karte); } .vorlage .kopieren textarea { background: var(--mintHell); border-color: var(--mintLinie); } .vorlage summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem; padding: .75rem 1rem; cursor: pointer; list-style: none; } .vorlage summary::-webkit-details-marker { display: none; } .vorlage summary::after { content: "+"; margin-left: auto; font-weight: 600; color: var(--akzent); } .vorlage[open] summary::after { content: "–"; } .vorlage .nummer { font: 1.25rem/1 var(--hand); color: var(--akzent); } .vorlage summary b { font-weight: 600; color: var(--stark); } .vorlage summary small { font-size: .82rem; } .vorlage .kopieren { padding: 0 1rem 1rem; } .tipps { margin: .9rem 0 0; padding-left: 1.1rem; font-size: .9rem; color: var(--leise); } /* ── Formulare: Anfragen, Logo, Anmeldung ────────────────────────────────── */ .feld { display: grid; gap: .3rem; margin: 0 0 .9rem; } .feld label { font-size: .88rem; font-weight: 400; color: var(--leise); } .feld input, .feld textarea, .feld select { font: inherit; font-size: 1rem; font-weight: 400; color: var(--stark); padding: .6rem .8rem; border-radius: var(--r-s); border: 1px solid var(--linie); background: var(--karte); width: 100%; max-width: 26rem; } .feld textarea { min-height: 5.5rem; resize: vertical; } .feld input:focus, .feld textarea:focus { border-color: var(--akzent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--akzent) 15%, transparent); } .formular { margin-top: .9rem; padding: 1rem; border-radius: var(--r-s); background: var(--karte); border: 1px solid var(--linie); flex-basis: 100%; } .formular .knopfzeile { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; } /* Die Frage als Beschriftung des Feldes — so fett wie vorher die Zeile darüber. */ .feld label.frage { font-size: 1rem; font-weight: 600; color: var(--stark); } /* Eine leise Zeile unter einer Liste: Frage links, kleiner Knopf rechts. */ .nebenzeile { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: .9rem; padding-top: .9rem; border-top: 1px dashed var(--linie); } .nebenzeile small { flex: 1 1 16rem; } /* Darf umbrechen: „Angaben für die Rechnung schicken“ ragte bei 320 px aus der Karte. */ .knopf.klein { font-size: .85rem; padding: .35rem .9rem; white-space: normal; text-align: left; } /* ── Meldung nach einer Aktion ───────────────────────────────────────────── */ .antwort { margin-top: .9rem; padding: .85rem 1rem; border-radius: var(--r-s); background: var(--gut); color: var(--gutText); border: 1px solid var(--gutText); font-size: .93rem; flex-basis: 100%; } .antwort.fehler { background: var(--achtung); color: var(--achtungText); border-color: var(--achtungText); } .antwort.hinweis { background: var(--warm); color: var(--stark); border-color: var(--warmLinie); } .antwort b { color: inherit; } [hidden] { display: none !important; } /* ── Euer Logo ───────────────────────────────────────────────────────────── */ /* Seit dem 23.09.2026: links eine große Kachel mit Schachbrett (so sieht man, ob der Hintergrund wirklich durchsichtig ist), rechts Stand, was mit dem Logo passiert, und das Ablagefeld. Vorher eine Kachel von 7 × 4,5 rem und ein nacktes Dateifeld. */ .logo-reihe { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1.3rem 1.8rem; } .logo-kachel { position: relative; flex: 0 0 auto; width: min(100%, 17rem); aspect-ratio: 16 / 11; padding: 1.3rem; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--linie); border-radius: var(--r-m); background-color: #fff; background-image: conic-gradient(#F2EDF0 25%, transparent 0 50%, #F2EDF0 0 75%, transparent 0); background-size: 1rem 1rem; } /* Absolut mit Rand statt max-height: In einem Kasten, dessen Höhe nur aus aspect-ratio kommt, greifen Prozenthöhen nicht — das Logo lief unten heraus. */ .logo-kachel img { position: absolute; inset: 1.3rem; width: calc(100% - 2.6rem); height: calc(100% - 2.6rem); object-fit: contain; } .logo-platzhalter { display: grid; justify-items: center; gap: .3rem; text-align: center; font-size: .85rem; color: var(--leise); } .logo-platzhalter .ikon { width: 2.1rem; height: 2.1rem; stroke-width: 1.6; color: var(--leise); } .logo-platzhalter b { font-size: 1.05rem; font-weight: 600; letter-spacing: .06em; color: var(--stark); } .logo-info { flex: 1 1 19rem; min-width: 0; display: grid; justify-items: start; gap: .75rem; } .logo-info h3 { font-size: 1.08rem; } .logo-info p { margin: 0; font-size: .95rem; } /* Darf umbrechen: „Logo für diesen Kunden hinterlegen“ war bei 320 px breiter als die Karte und schob die ganze Seite seitlich. */ .logo-info > .knopf { max-width: 100%; white-space: normal; text-align: left; } .logo-punkte { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; font-size: .95rem; } .logo-punkte li { display: flex; align-items: flex-start; gap: .55rem; } .logo-punkte .ikon { margin-top: .3rem; width: 1rem; height: 1rem; stroke-width: 2.6; color: var(--gutText); } /* Gedrucktes Logo: darunter die Frage „hat sich geändert?“ statt des Uploads. */ .logo-neu { width: 100%; padding-top: .8rem; border-top: 1px dashed var(--linie); } .logo-neu b { display: block; font-weight: 600; color: var(--stark); } .logo-neu p { margin: .2rem 0 .7rem; font-size: .93rem; } .probe-hinweis { padding: .45rem .7rem; border-radius: var(--r-s); background: var(--achtung); color: var(--achtungText); } /* Das Ablagefeld: ein