/* =====================================================================
   Nikolais Webseite – Design "Dark Editorial" (Rot/Schwarz) + heller Modus
   Farben stehen oben als Variablen. Zum Ändern einer Farbe reicht es,
   sie hier einmal anzupassen.
   ===================================================================== */

@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-latin.938c6e8019b6.woff2") format("woff2");
  font-weight: 200 800; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-latin-ext.6d36d5bdedfa.woff2") format("woff2");
  font-weight: 200 800; font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Farben: dunkel (Standard) ---------- */
:root {
  --rot: #ff3b3b;
  --rot-dunkel: #d92c2c;
  --rot-weich: rgba(255, 59, 59, .13);
  --gruen: #3ddc84;
  --gruen-weich: rgba(61, 220, 132, .13);
  --gelb: #ffb547;
  --gelb-weich: rgba(255, 181, 71, .13);

  --grund: #18191c;
  --grund-2: #1f2024;
  --flaeche: #25262b;
  --flaeche-2: #2e3035;
  --glas: rgba(90, 92, 100, .38);
  --linie: rgba(255, 255, 255, .09);
  --text: #f3f3f4;
  --text-2: #c9cad0;
  --leise: #9a9ca3;
  --hero: radial-gradient(760px 540px at 58% 42%, #5b5e66 0%, #2c2e33 55%, #16171a 100%);
  --schatten: 0 30px 70px rgba(0, 0, 0, .45);
  --eingabe: #111214;
  --balken: #111214;
  color-scheme: dark;
}

/* ---------- Farben: hell ---------- */
html[data-theme="light"] {
  --grund: #efeeea;
  --grund-2: #e7e5e0;
  --flaeche: #ffffff;
  --flaeche-2: #f3f2ee;
  --glas: rgba(255, 255, 255, .62);
  --linie: rgba(0, 0, 0, .1);
  --text: #141517;
  --text-2: #3b3d42;
  --leise: #6b6d73;
  --hero: radial-gradient(760px 540px at 58% 42%, #ffffff 0%, #ecebe7 55%, #dcd9d3 100%);
  --schatten: 0 24px 60px rgba(0, 0, 0, .12);
  --eingabe: #ffffff;
  --balken: #141517;
  color-scheme: light;
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--grund); color: var(--text);
  font: 15px/1.6 "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
}
main { flex: 1; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { letter-spacing: -.025em; line-height: 1.1; margin: 0 0 .5em; }
h1 { font-size: clamp(38px, 6vw, 64px); font-weight: 700; }
h2 { font-size: clamp(26px, 3.4vw, 38px); font-weight: 700; }
h3 { font-size: 18px; }
p { margin: 0 0 1em; }
.leise { color: var(--leise); }
.klein { font-size: 13px; }
.kicker { font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--rot); margin-bottom: 12px; }
.huelle { max-width: 1200px; margin: 0 auto; padding-inline: 20px; }
.inhalt { padding-block: 48px 72px; }
.schmal { max-width: 720px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--rot); outline-offset: 2px; }

/* ---------- Kopfleiste ---------- */
.kopf {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 28px; min-height: 64px; padding-right: 20px;
  background: color-mix(in srgb, var(--grund) 88%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linie);
}
.kopf.auf-hero { position: absolute; left: 0; right: 0; background: transparent; border: 0; backdrop-filter: none; }
.marke {
  width: 64px; height: 64px; flex: none; display: flex; align-items: center; justify-content: center;
  background: var(--balken); color: #fff; text-decoration: none; font-weight: 800; font-size: 20px;
}
.marke span { color: var(--rot); }
.menue { display: flex; gap: 28px; }
.menue a {
  color: var(--leise); text-decoration: none; font-weight: 600; font-size: 14px;
  position: relative; padding: 6px 0; white-space: nowrap;
}
.menue a:hover, .menue a.aktiv { color: var(--text); }
.menue a.aktiv::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--text); }
.kopf .luecke { flex: 1; }
.menue a.zur-seite { color: var(--leise); border-left: 1px solid var(--linie); padding-left: 24px; }
.menue a.zur-seite:hover { color: var(--rot); }
.name-marke { font-weight: 800; white-space: nowrap; }
.name-marke span { font-weight: 400; color: var(--leise); }
.schalter { display: flex; align-items: center; gap: 8px; }
.sprache { display: flex; border: 1px solid var(--linie); border-radius: 3px; overflow: hidden; font-size: 11px; font-weight: 700; }
.sprache a { padding: 5px 8px; color: var(--leise); text-decoration: none; }
.sprache a.an { background: var(--text); color: var(--grund); }
.rund {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--linie);
  background: transparent; color: var(--text); cursor: pointer; display: grid; place-items: center; font-size: 15px; padding: 0;
}
.rund:hover { border-color: var(--rot); }
.knopf-login {
  color: var(--text); border: 1px solid var(--linie); padding: 8px 16px; border-radius: 3px;
  font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
}
.knopf-login:hover { border-color: var(--rot); }
.burger { display: none; }

/* Profil-Menü */
.profil-menue { position: relative; }
.profil-menue > button { display: flex; align-items: center; gap: 10px; background: none; border: 0; color: var(--text); font: 600 14px "Manrope", sans-serif; cursor: pointer; padding: 4px; }
.avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: none; object-fit: cover;
  background: var(--rot); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 13px;
}
.avatar.gross { width: 96px; height: 96px; font-size: 32px; }
.aufklapp {
  position: absolute; right: 0; top: calc(100% + 10px); min-width: 220px;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px; box-shadow: var(--schatten);
  padding: 6px; display: none;
}
.aufklapp.offen { display: block; }
.aufklapp a, .aufklapp button {
  display: block; width: 100%; text-align: left; padding: 10px 12px; border-radius: 6px; border: 0; background: none;
  color: var(--text); text-decoration: none; font: 600 14px "Manrope", sans-serif; cursor: pointer;
}
.aufklapp a:hover, .aufklapp button:hover { background: var(--flaeche-2); }
.aufklapp .trenner { height: 1px; background: var(--linie); margin: 6px 0; }
.aufklapp .wer { padding: 8px 12px 10px; font-size: 12px; color: var(--leise); }
.aufklapp .wer b { display: block; color: var(--text); font-size: 14px; }

/* Bearbeiten-Schalter (ab Etappe 2 aktiv) */
.bearbeiten { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; color: var(--leise); opacity: .55; cursor: not-allowed; }
.kipp { width: 38px; height: 20px; border-radius: 999px; background: var(--flaeche-2); position: relative; border: 1px solid var(--linie); }
.kipp::after { content: ""; position: absolute; left: 3px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--leise); }

/* ---------- Hero (öffentliche Startseite) ---------- */
.hero { position: relative; min-height: min(760px, 100vh); background: var(--hero); overflow: hidden; }
.hero-foto {
  position: absolute; left: 34%; top: 0; bottom: 0; width: 38%;
  background-size: cover; background-position: center 25%;
  -webkit-mask-image: radial-gradient(ellipse 70% 78% at 50% 45%, #000 42%, transparent 74%);
  mask-image: radial-gradient(ellipse 70% 78% at 50% 45%, #000 42%, transparent 74%);
}
.hero-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 40, 40, .5), rgba(255, 40, 40, .08) 60%, transparent); mix-blend-mode: color; }
html[data-theme="light"] .hero-foto::after { opacity: .6; }
.hero-text { position: relative; z-index: 3; padding: 170px 0 220px 84px; max-width: 460px; }
.hero-text p { color: var(--text-2); font-size: 16px; margin-bottom: 26px; }
.hero-seite {
  position: absolute; right: 56px; top: 44%; z-index: 3; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; max-width: 260px;
}
.hero-seite .klein { letter-spacing: .14em; text-transform: uppercase; color: var(--leise); font-weight: 700; font-size: 11px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.chip { padding: 5px 11px; border: 1px solid var(--linie); border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--glas); }
.hero-leiste { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: grid; grid-template-columns: 1fr 2.2fr .8fr; min-height: 132px; }
.hero-leiste .punkte { display: flex; align-items: center; padding-left: 84px; gap: 10px; color: var(--leise); font-size: 12px; font-weight: 600; }
.hero-leiste .punkte span { color: var(--rot); letter-spacing: 3px; }
.glas {
  background: var(--glas); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding: 24px 30px;
}
.glas small { grid-column: 1 / -1; color: var(--leise); font-size: 10px; font-weight: 700; letter-spacing: .2em; margin-bottom: -14px; }
.glas h4 { margin: 0 0 6px; font-size: 13px; letter-spacing: 0; }
.glas p { margin: 0; color: var(--text-2); font-size: 13px; }
.hero-kontakt { position: relative; display: grid; place-items: center; text-decoration: none; background-size: 260%; background-position: 60% 40%; }
.hero-kontakt::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .35); }
.hero-kontakt span { position: relative; width: 46px; height: 46px; border-radius: 50%; background: #fff; color: #111; display: grid; place-items: center; font-size: 18px; transition: transform .2s; }
.hero-kontakt:hover span { transform: scale(1.1); }

/* Abschnitte unter dem Hero */
.abschnitt { padding-block: 80px; border-bottom: 1px solid var(--linie); }
.zwei-spalten { display: grid; grid-template-columns: 1fr 1.4fr; gap: 60px; align-items: start; }
.gross-text p { font-size: 18px; color: var(--text-2); }
.cta-band { display: flex; justify-content: space-between; align-items: center; gap: 30px; flex-wrap: wrap; }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--rot); color: #fff; border: 0; border-radius: 3px; padding: 13px 22px;
  font: 700 12px "Manrope", sans-serif; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; cursor: pointer;
}
.knopf:hover { background: var(--rot-dunkel); }
.knopf.leer { background: transparent; color: var(--text); border: 1px solid var(--linie); }
.knopf.leer:hover { border-color: var(--rot); }
.knopf.gefahr { background: transparent; color: var(--rot); border: 1px solid rgba(255, 59, 59, .45); }
.knopf.gefahr:hover { background: var(--rot); color: #fff; }
.knopf.klein { padding: 8px 14px; font-size: 11px; }
.knopfreihe { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ---------- Karten & Flächen ---------- */
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; padding: 24px; }
.raster { display: grid; gap: 16px; }
.raster.drei { grid-template-columns: repeat(3, 1fr); }
.raster.vier { grid-template-columns: repeat(4, 1fr); }

/* Projekt-Kacheln (privat) */
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 3px; }
.kachel { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: #333; color: #fff; text-decoration: none; }
.kachel .bg { position: absolute; inset: 0; transition: transform .4s; display: grid; place-items: center; }
.kachel:hover .bg { transform: scale(1.05); }
.kachel .bg svg { width: 64px; height: 64px; stroke: rgba(255, 255, 255, .8); fill: none; stroke-width: 1.4; margin-bottom: 40px; }
.kachel .nr { position: absolute; left: 18px; top: 16px; font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, .6); }
.kachel .unten { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px; background: linear-gradient(0deg, rgba(0, 0, 0, .78), transparent); }
.kachel h4 { margin: 0 0 4px; font-size: 18px; letter-spacing: -.01em; }
.kachel p { margin: 0; font-size: 12px; color: #d4d5da; }
.kachel .bald { position: absolute; right: 12px; top: 12px; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: rgba(0, 0, 0, .45); padding: 3px 8px; border-radius: 999px; }
.kachel:first-child h4::after { content: ""; display: block; width: 24px; height: 2px; background: var(--rot); margin-top: 8px; }

.linkliste { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
.linkliste a, .linkliste span { background: var(--glas); padding: 16px 18px; text-decoration: none; font-weight: 600; display: flex; justify-content: space-between; color: var(--text); }
.linkliste span { color: var(--leise); }
.linkliste b { color: var(--rot); }
.kopfzeile { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
.kopfzeile h1, .kopfzeile h2 { margin: 0; }
.zaehler { font-size: 12px; color: var(--leise); }
.zaehler b { color: var(--text); font-size: 30px; margin-right: 6px; }
.abschnitt-titel { font-size: 11px; letter-spacing: .2em; color: var(--leise); font-weight: 700; margin: 40px 0 12px; text-transform: uppercase; }

/* ---------- Lebenslauf ---------- */
.zeitleiste { list-style: none; padding: 0; margin: 0 0 56px; border-left: 2px solid var(--linie); }
.zeitleiste li { position: relative; padding: 0 0 28px 28px; }
.zeitleiste li::before { content: ""; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--grund); border: 2px solid var(--rot); }
.zeitleiste .wann { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rot); }
.zeitleiste h3 { margin: 4px 0 2px; }
.zeitleiste .wo { color: var(--leise); font-weight: 600; font-size: 14px; }
.zeitleiste p { margin: 6px 0 0; color: var(--text-2); }
.cv-kopf { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: end; margin-bottom: 48px; }
.cv-foto { width: 140px; height: 140px; border-radius: 50%; background-size: cover; background-position: center 25%; border: 3px solid var(--rot); }
.nicht-kopierbar { -webkit-user-select: none; user-select: none; }

/* ---------- Formulare ---------- */
.formular { display: grid; gap: 18px; }
.feld label { display: block; font-weight: 700; font-size: 13px; margin-bottom: 6px; }
.feld .hilfe { font-size: 12px; color: var(--leise); margin-top: 5px; }
.feld .fehler { font-size: 13px; color: var(--rot); margin-top: 5px; font-weight: 600; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], textarea, select {
  width: 100%; background: var(--eingabe); color: var(--text); border: 1px solid var(--linie); border-radius: 6px;
  padding: 12px 14px; font: 15px "Manrope", sans-serif;
}
textarea { resize: vertical; min-height: 90px; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--rot); border-color: transparent; }
.feld.hat-fehler input, .feld.hat-fehler textarea { border-color: var(--rot); }
.haken { display: flex; gap: 10px; align-items: flex-start; font-weight: 500 !important; font-size: 14px !important; }
.haken input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--rot); flex: none; }
.falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
input[type=file] { font: 14px "Manrope", sans-serif; color: var(--text-2); }
input[type=file]::file-selector-button { background: var(--flaeche-2); color: var(--text); border: 1px solid var(--linie); padding: 8px 14px; border-radius: 6px; margin-right: 12px; font: 700 12px "Manrope", sans-serif; cursor: pointer; }
.bild-vorschau { width: 120px; border-radius: 8px; margin-bottom: 10px; border: 1px solid var(--linie); }
fieldset { border: 1px solid var(--linie); border-radius: 12px; padding: 22px; margin: 0 0 20px; display: grid; gap: 18px; }
legend { padding: 0 8px; font-weight: 800; font-size: 14px; }
.paar { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* Anmelde-Karte */
.login-flaeche { min-height: calc(100vh - 64px); display: grid; place-items: center; padding: 40px 20px; background: var(--hero); }
.login-karte { width: 100%; max-width: 420px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 14px; padding: 34px; box-shadow: var(--schatten); }
.login-karte h1 { font-size: 34px; }

/* ---------- Meldungen ---------- */
.meldungen { position: fixed; left: 50%; top: 78px; transform: translateX(-50%); z-index: 60; display: grid; gap: 8px; width: min(560px, calc(100% - 32px)); }
.meldung { padding: 12px 16px 12px 18px; border-radius: 8px; background: var(--flaeche); border: 1px solid var(--linie); border-left: 4px solid var(--gruen); box-shadow: var(--schatten); font-weight: 600; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.meldung.error { border-left-color: var(--rot); }
.meldung.info { border-left-color: var(--gelb); }
.meldung button { background: none; border: 0; color: var(--leise); cursor: pointer; font-size: 18px; line-height: 1; }
.hinweis { padding: 14px 16px; border-radius: 10px; background: var(--rot-weich); border: 1px solid rgba(255, 59, 59, .3); margin-bottom: 18px; font-weight: 600; }
.hinweis.gelb { background: var(--gelb-weich); border-color: rgba(255, 181, 71, .35); }

/* ---------- Tabellen / Listen (Verwaltung) ---------- */
.tabelle { width: 100%; border-collapse: collapse; }
.tabelle-huelle { overflow-x: auto; border: 1px solid var(--linie); border-radius: 12px; background: var(--flaeche); }
.tabelle th, .tabelle td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--linie); vertical-align: middle; }
.tabelle th { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--leise); background: var(--flaeche-2); }
.tabelle tr:last-child td { border-bottom: 0; }
.tabelle a { text-decoration: none; font-weight: 700; }
.tabelle tr.neu td:first-child::before { content: "●"; color: var(--rot); margin-right: 8px; }
.aktionen { display: flex; gap: 8px; justify-content: flex-end; }
.inkognito-karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; padding: 18px 20px; margin-bottom: 22px; }
.inkognito-karte.an { border-color: var(--rot); background: var(--rot-weich); }
.inkognito-karte .haken { cursor: pointer; font-size: 15px !important; line-height: 1.5; }
.inkognito-hinweis { position: fixed; z-index: 60; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); background: var(--flaeche); border: 1px solid var(--rot); border-radius: 12px; padding: 9px 14px; font-size: 13px; font-weight: 600; box-shadow: var(--schatten); }
.werkzeug-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.werkzeug { display: block; text-decoration: none; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; padding: 22px; transition: border-color .15s, transform .15s; }
.werkzeug:hover { border-color: var(--rot); transform: translateY(-2px); }
.werkzeug .ic { font-size: 26px; margin-bottom: 10px; }
.werkzeug h3 { margin: 0 0 4px; }
.werkzeug p { margin: 0; color: var(--leise); font-size: 14px; }
.werkzeug.aus { opacity: .5; pointer-events: none; }
.marke-klein { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: var(--rot-weich); color: var(--rot); vertical-align: middle; margin-left: 6px; }
.marke-klein.gruen { background: var(--gruen-weich); color: var(--gruen); }
.brotkrumen { font-size: 13px; color: var(--leise); margin-bottom: 18px; }
.brotkrumen a { text-decoration: none; font-weight: 600; }
.nachricht-text { white-space: pre-wrap; font-size: 16px; line-height: 1.7; }

/* ---------- Sicherheitsabfrage (Löschen) ---------- */
.dialog-hg { position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, .6); display: grid; place-items: center; padding: 20px; }
.dialog-hg[hidden] { display: none; }
.dialog { width: 100%; max-width: 440px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 14px; padding: 28px; box-shadow: var(--schatten); }
.dialog h3 { font-size: 22px; }
.dialog p { color: var(--text-2); }

/* ---------- Fehlerseite ---------- */
.fehlerseite { min-height: 60vh; display: grid; place-items: center; text-align: center; padding: 60px 20px; }
.fehlerseite .code { font-size: clamp(90px, 18vw, 180px); font-weight: 800; color: var(--rot); line-height: 1; letter-spacing: -.05em; }

/* ---------- Rechtstexte ---------- */
.rechtstext h2 { font-size: 22px; margin-top: 36px; }
.rechtstext p, .rechtstext li { color: var(--text-2); }
.rechtstext address { font-style: normal; white-space: pre-line; font-size: 17px; }

/* ---------- Fußzeile ---------- */
.fuss { background: var(--balken); color: #9a9ca3; font-size: 12px; }
.fuss .huelle { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-block: 16px; }
.fuss a { color: #c9cad0; }

/* =====================================================================
   Projekte (ab Etappe 2)
   ===================================================================== */

/* Bearbeiten-Schalter in der Kopfleiste */
.bearbeiten-form { margin: 0; }
button.bearbeiten { opacity: 1; cursor: pointer; background: none; border: 0; font: 700 12px "Manrope", sans-serif; color: var(--leise); padding: 6px; }
button.bearbeiten:hover { color: var(--text); }
button.bearbeiten.an { color: var(--rot); }
button.bearbeiten .kipp { display: inline-block; vertical-align: middle; }
button.bearbeiten.an .kipp { background: var(--rot); border-color: var(--rot); }
button.bearbeiten.an .kipp::after { left: auto; right: 3px; background: #fff; }
.bearbeiten-hinweis { display: inline-block; margin-bottom: 16px; padding: 6px 12px; border-radius: 999px; background: var(--rot-weich); color: var(--rot); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }

/* Kacheln & Links auf der Startseite */
.kachel.neu { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: transparent; border: 2px dashed var(--linie); color: var(--rot); font-weight: 700; }
.kachel.neu span { font-size: 40px; line-height: 1; }
.kachel.neu:hover { border-color: var(--rot); }
.link-eintrag { position: relative; display: flex; }
.link-eintrag > a { flex: 1; }
.link-werkzeug { display: flex; align-items: center; gap: 2px; background: var(--glas); padding-right: 8px; }
.link-werkzeug a, .link-werkzeug button { background: none; border: 0; color: var(--leise); cursor: pointer; padding: 6px; font-size: 14px; text-decoration: none; }
.link-werkzeug a:hover, .link-werkzeug button:hover { color: var(--rot); }
.link-werkzeug form { margin: 0; }
.linkliste a.link-neu { background: transparent; border: 1px dashed var(--linie); color: var(--rot); justify-content: center; }

/* Projektkopf */
.projekt-kopf {
  position: relative; padding-block: 34px 30px; color: #fff;
  background: linear-gradient(0deg, rgba(0, 0, 0, .78), rgba(0, 0, 0, .25)), var(--kopfbild, linear-gradient(135deg, var(--kopffarbe, #6a1e1e), #16171a));
  background-size: cover; background-position: center;
}
.projekt-kopf h1 { margin: 0; font-size: clamp(34px, 5vw, 56px); }
.projekt-kopf p { margin: 6px 0 0; color: #d4d5da; }
.brotkrumen.hell, .brotkrumen.hell a { color: rgba(255, 255, 255, .7); }
.projekt-titel { display: flex; gap: 20px; align-items: center; margin-top: 18px; }
.projekt-symbol svg { width: 64px; height: 64px; stroke: rgba(255, 255, 255, .85); fill: none; stroke-width: 1.4; }
.projekt-werkzeug { margin-top: 20px; }
.projekt-kopf .knopf.leer { color: #fff; border-color: rgba(255, 255, 255, .3); }

/* Aufteilung: Abschnitte links, Inhalt rechts */
.projekt-raster { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 44px; align-items: start; }
.abschnitt-nav { position: sticky; top: 84px; }
.baum, .baum ul { list-style: none; margin: 0; padding: 0; }
.baum ul { padding-left: 14px; border-left: 1px solid var(--linie); margin: 2px 0 6px 8px; }
.baum a { display: block; padding: 7px 10px; border-radius: 6px; text-decoration: none; color: var(--text-2); font-weight: 600; font-size: 14px; }
.baum a:hover { background: var(--flaeche); color: var(--text); }
.baum a.aktiv { background: var(--rot-weich); color: var(--rot); }
.abschnitt-kopf { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.abschnitt-kopf h2 { margin: 0; }
.werkzeug-leiste { display: flex; align-items: center; gap: 4px; }
.werkzeug-leiste form { margin: 0; }
.werkzeug-leiste a, .werkzeug-leiste button {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 6px; border: 1px solid var(--linie);
  background: var(--flaeche); color: var(--text); text-decoration: none; cursor: pointer; font-size: 14px; padding: 0;
}
.werkzeug-leiste a:hover, .werkzeug-leiste button:hover { border-color: var(--rot); }
.werkzeug-leiste .rot:hover { background: var(--rot); color: #fff; }

/* Blöcke */
.block { position: relative; margin-bottom: 30px; scroll-margin-top: 90px; }
.block-titel { font-size: 20px; margin-bottom: 10px; }
.block-werkzeug { position: absolute; right: 0; top: -6px; z-index: 2; opacity: .35; transition: opacity .15s; }
.block:hover .block-werkzeug, .block-werkzeug:focus-within { opacity: 1; }
.block-art { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--leise); margin-right: 6px; }
.block:has(.block-werkzeug) { padding-top: 26px; border-top: 1px dashed var(--linie); }
.formatiert { color: var(--text-2); font-size: 16px; line-height: 1.7; }
.formatiert > *:last-child { margin-bottom: 0; }
.formatiert h2 { font-size: 24px; margin: 1.4em 0 .5em; color: var(--text); }
.formatiert h3 { font-size: 19px; margin: 1.3em 0 .4em; color: var(--text); }
.formatiert h4 { font-size: 16px; margin: 1.2em 0 .3em; color: var(--text); }
.formatiert strong { color: var(--text); }
.formatiert ul, .formatiert ol { padding-left: 22px; margin: 0 0 1em; }
.formatiert li { margin: 4px 0; }
.formatiert a { color: var(--rot); }
.formatiert blockquote { margin: 0 0 1em; padding: 12px 16px; border-left: 4px solid var(--rot); background: var(--rot-weich); border-radius: 0 8px 8px 0; color: var(--text); }
.formatiert blockquote p { margin: 0; }
.formatiert code { background: var(--flaeche-2); padding: 1px 6px; border-radius: 4px; font-size: .9em; }
.formatiert pre { background: var(--eingabe); border: 1px solid var(--linie); padding: 14px; border-radius: 8px; overflow-x: auto; }
.formatiert table { border-collapse: collapse; margin: 0 0 1em; }
.formatiert th, .formatiert td { border: 1px solid var(--linie); padding: 6px 10px; }
.block-bild { margin: 0; }
.block-bild img { border-radius: 10px; max-height: 70vh; width: auto; border: 1px solid var(--linie); }
.block-bild figcaption { margin-top: 8px; color: var(--leise); font-size: 14px; }
.datei-karte { display: flex; align-items: center; gap: 16px; padding: 16px; border: 1px solid var(--linie); border-radius: 12px; background: var(--flaeche); flex-wrap: wrap; }
.datei-endung { width: 54px; height: 54px; border-radius: 10px; background: var(--rot); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 13px; flex: none; }
.datei-name { flex: 1; min-width: 180px; display: flex; flex-direction: column; }
.datei-name b { word-break: break-word; }
.pdf-ansicht { width: 100%; height: 75vh; margin-top: 14px; border: 1px solid var(--linie); border-radius: 10px; background: var(--flaeche); }
.word-vorschau { margin-top: 14px; border: 1px solid var(--linie); border-radius: 10px; background: var(--flaeche); padding: 20px 24px; max-height: 70vh; overflow: auto; }
.word-hinweis { margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--linie); }
.checkliste { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; padding: 18px 22px; }
.checkliste h4 { margin: 16px 0 8px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--rot); }
.checkliste h4:first-child { margin-top: 0; }
.checkliste .haken { padding: 7px 0; border-bottom: 1px solid var(--linie); cursor: pointer; font-size: 15px !important; }
.checkliste .haken:has(input:checked) span { text-decoration: line-through; color: var(--leise); }
.checkliste [data-zuruecksetzen] { margin-top: 14px; }
.block-neu { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 16px; border: 2px dashed var(--linie); border-radius: 12px; margin: 10px 0 30px; }
.block-neu > span { font-weight: 800; font-size: 13px; color: var(--leise); margin-right: 4px; }
.unter-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 24px; }
.unter-karten h3 { font-size: 17px; }
.leer-karte { text-align: center; padding: 40px 24px; }

@media (hover: none) { .block-werkzeug { opacity: 1; } }

/* Projektübersicht (Liste) */
.projekt-liste { display: grid; gap: 12px; }
.projekt-zeile { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 16px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; }
.projekt-zeile:hover { border-color: rgba(255, 59, 59, .4); }
.projekt-mini { width: 96px; height: 96px; border-radius: 10px; display: grid; place-items: center; }
.projekt-mini svg { width: 40px; height: 40px; stroke: rgba(255, 255, 255, .85); fill: none; stroke-width: 1.4; }
.projekt-zeile h3 { margin: 0 0 2px; font-size: 20px; }
.projekt-zeile h3 a { text-decoration: none; }
.projekt-zeile h3 a:hover { color: var(--rot); }
.projekt-zeile p { margin: 0 0 10px; }
.links-chips { justify-content: flex-start; }
.links-chips a.chip { text-decoration: none; color: var(--text-2); }
.links-chips a.chip:hover { border-color: var(--rot); color: var(--rot); }
@media (max-width: 640px) {
  .projekt-zeile { grid-template-columns: 64px minmax(0, 1fr); }
  .projekt-mini { width: 64px; height: 64px; }
  .projekt-zeile > .knopf { grid-column: 1 / -1; justify-self: start; }
}

/* Zurück-Knopf & Bildbetrachter */
.zurueck-leiste { border-bottom: 1px solid var(--linie); background: var(--grund); }
.zurueck-leiste .huelle { padding-block: 10px; }
.zurueck-knopf { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px 6px 10px; border: 1px solid var(--linie); border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 13px; color: var(--text-2); }
.zurueck-knopf:hover { border-color: var(--rot); color: var(--rot); }
a[data-lightbox] { cursor: zoom-in; }
.lightbox { position: fixed; inset: 0; z-index: 90; background: #0a0a0c;  display: grid; grid-template-rows: auto 1fr; }
.lightbox[hidden] { display: none; }
.lightbox-leiste { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; padding-top: calc(14px + env(safe-area-inset-top, 0px)); color: #ddd; }
.lightbox-leiste .knopf.leer { color: #fff; border-color: rgba(255, 255, 255, .3); }
.lightbox figure { margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 0 70px 30px; min-height: 0; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 150px); object-fit: contain; border-radius: 6px; background: #fff; }
.lightbox figcaption { color: #ccc; text-align: center; font-size: 14px; }
.lightbox-pfeil { position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); background: rgba(0, 0, 0, .4); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; }
.lightbox-pfeil:hover { background: var(--rot); border-color: var(--rot); }
.lightbox-pfeil.links { left: 12px; }
.lightbox-pfeil.rechts { right: 12px; }
.lightbox-pfeil[hidden] { display: none; }
@media (max-width: 640px) { .lightbox figure { padding: 0 10px 20px; } .lightbox-pfeil { top: auto; bottom: 16px; transform: none; } }

/* Stückliste */
.stueckliste-kopf { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
input.suche { width: 240px; padding: 10px 14px; }
.bauteil-liste { display: grid; gap: 8px; }
.bauteil-zeile { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 10px 14px 10px 10px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; }
.bauteil-zeile:hover { border-color: rgba(255, 59, 59, .35); }
.bauteil-bild { width: 64px; height: 64px; border-radius: 8px; overflow: hidden; background: #fff; display: grid; place-items: center; }
.bauteil-bild img { width: 100%; height: 100%; object-fit: contain; }
.bauteil-bild svg { width: 30px; height: 30px; stroke: #666; fill: none; stroke-width: 1.5; }
.bauteil-text { display: flex; flex-direction: column; min-width: 0; }
.bauteil-text a { text-decoration: none; }
.bauteil-text a:hover b { color: var(--rot); }
.bauteil-text .leise { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anzahl { display: flex; align-items: center; border: 1px solid var(--linie); border-radius: 999px; overflow: hidden; background: var(--eingabe); margin: 0; }
.anzahl button { width: 40px; height: 40px; border: 0; background: transparent; color: var(--text); font-size: 20px; font-weight: 700; cursor: pointer; }
.anzahl button:hover { background: var(--rot); color: #fff; }
.anzahl input { width: 58px; height: 40px; border: 0; border-radius: 0; background: transparent; text-align: center; font-weight: 800; font-size: 16px; padding: 0; -moz-appearance: textfield; }
.anzahl input::-webkit-outer-spin-button, .anzahl input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.anzahl input.null { color: var(--rot); }
.anzahl.laedt { opacity: .6; }
.anzahl.ok input { color: var(--gruen); }
.bauteil-detail { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 40px; align-items: start; margin-top: 10px; }
.bauteil-gross img, .bauteil-platzhalter { width: 100%; border-radius: 14px; background: #fff; border: 1px solid var(--linie); }
.bauteil-gross img { max-height: 420px; object-fit: contain; }
.bauteil-platzhalter { aspect-ratio: 1; display: grid; place-items: center; }
.bauteil-platzhalter svg { width: 30%; stroke: #888; fill: none; stroke-width: 1.2; }
.bauteil-anzahl-gross { display: flex; align-items: center; gap: 14px; margin: 18px 0; }
.bauteil-anzahl-gross .anzahl button { width: 48px; height: 48px; }
.bauteil-anzahl-gross .anzahl input { width: 72px; height: 48px; font-size: 20px; }
.eckdaten { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 0; }
.eckdaten dt { color: var(--leise); font-weight: 700; font-size: 13px; }
.eckdaten dd { margin: 0; }
.anhang-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.anhang { margin: 0; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px; overflow: hidden; }
.anhang img { width: 100%; height: 150px; object-fit: contain; background: #fff; }
.anhang-datei { display: grid; place-items: center; height: 150px; }
.anhang figcaption { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 8px 10px; font-size: 13px; }
.anhang figcaption span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anhang figcaption form { margin: 0; }
.anhang figcaption button { background: none; border: 0; color: var(--leise); cursor: pointer; }
.anhang figcaption button:hover { color: var(--rot); }
.anhang-neu { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; padding: 14px; border: 2px dashed var(--linie); border-radius: 12px; }
.anhang-neu input[type=text] { width: 240px; }

/* Rezepte */
.kategorie-sprung { margin-bottom: 22px; }
.rezept-gruppe { margin-bottom: 34px; scroll-margin-top: 90px; }
.rezept-kategorie { font-size: 22px; padding-bottom: 8px; border-bottom: 2px solid var(--rot); display: inline-block; }
.rezept-unterkategorie { font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--leise); margin: 18px 0 10px; }
.rezept-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.rezept-karte { display: block; text-decoration: none; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; overflow: hidden; transition: border-color .15s, transform .15s; }
.rezept-karte:hover { border-color: var(--rot); transform: translateY(-2px); }
.rezept-karte-bild { aspect-ratio: 16 / 10; background: linear-gradient(160deg, #5a4a1f, #1c1c1f) center / cover; display: grid; place-items: center; }
.rezept-karte-bild svg { width: 44px; height: 44px; stroke: rgba(255, 255, 255, .8); fill: none; stroke-width: 1.4; }
.rezept-karte-text { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; }
.rezept-kopf { padding-block: 40px 34px; }
.rezept-kopf .chip { background: rgba(0, 0, 0, .35); border-color: rgba(255, 255, 255, .2); color: #fff; }
.rezept-raster { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 44px; align-items: start; }
.zutaten-karte { position: sticky; top: 84px; }
.portionen { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px; border-radius: 999px; background: var(--eingabe); border: 1px solid var(--linie); margin-bottom: 16px; }
.portionen button { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--rot); color: #fff; font-size: 22px; font-weight: 700; cursor: pointer; }
.portionen b { font-size: 22px; }
.zutaten { list-style: none; padding: 0; margin: 0 0 14px; }
.zutaten li { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--linie); }
.zutaten li.zutaten-gruppe { display: block; border: 0; padding-top: 14px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--rot); }
.zutaten .menge { text-align: right; font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; }
.naehrwerte { width: 100%; border-collapse: collapse; font-size: 14px; }
.naehrwerte td { padding: 5px 0; border-bottom: 1px solid var(--linie); }
.naehrwerte td:last-child { text-align: right; font-weight: 700; }
.zubereitung ol { counter-reset: schritt; list-style: none; padding: 0; }
.zubereitung ol > li { counter-increment: schritt; position: relative; padding: 0 0 18px 50px; }
.zubereitung ol > li::before { content: counter(schritt); position: absolute; left: 0; top: -2px; width: 34px; height: 34px; border-radius: 50%; background: var(--rot); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 15px; }
.zutaten-tabelle td { padding: 6px; }
.zutaten-tabelle input[type=text], .zutaten-tabelle input[type=number] { padding: 8px 10px; font-size: 14px; }
.zutaten-tabelle td:nth-child(2) input { width: 90px; }
.zutaten-tabelle td:nth-child(3) input { width: 90px; }
.zutaten-tabelle .mitte { text-align: center; }
.zutaten-tabelle input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--rot); }
.paar.drei { grid-template-columns: repeat(3, 1fr); }
.paar.vier { grid-template-columns: repeat(4, 1fr); }
.kategorie-zeile { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--linie); }
.kategorie-zeile.unter { padding-left: 22px; }
.kategorie-zeile form { margin: 0; }

/* Benutzerverwaltung */
.benutzer-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.rechte-tabelle .mitte { text-align: center; width: 110px; }
.rechte-tabelle input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--rot); cursor: pointer; }
.radio-liste { display: grid; gap: 8px; }
.marke-klein.gelb { background: var(--gelb-weich); color: var(--gelb); }
@media (max-width: 900px) { .benutzer-raster { grid-template-columns: 1fr; } }

/* Symbol- und Farbwahl im Projekt-Formular */
.auswahl-symbole, .auswahl-farben { display: flex; flex-wrap: wrap; gap: 8px; }
.symbol-option, .farb-option { position: relative; cursor: pointer; }
.symbol-option input, .farb-option input { position: absolute; opacity: 0; pointer-events: none; }
.symbol-option span { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 10px; border: 2px solid var(--linie); background: var(--flaeche-2); }
.symbol-option svg { width: 28px; height: 28px; stroke: var(--text); fill: none; stroke-width: 1.5; }
.farb-option span { display: block; width: 40px; height: 40px; border-radius: 50%; border: 3px solid transparent; box-shadow: 0 0 0 1px var(--linie); }
.symbol-option input:checked + span { border-color: var(--rot); background: var(--rot-weich); }
.farb-option input:checked + span { border-color: var(--text); }
.symbol-option input:focus-visible + span, .farb-option input:focus-visible + span { outline: 2px solid var(--rot); outline-offset: 2px; }

/* Text-Editor */
.editor-leiste { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.editor-leiste button { background: var(--flaeche-2); border: 1px solid var(--linie); color: var(--text); border-radius: 6px; padding: 6px 10px; font: 600 13px "Manrope", sans-serif; cursor: pointer; }
.editor-leiste button:hover { border-color: var(--rot); }
textarea[data-editor="1"] { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 14px; line-height: 1.6; }

/* Verlauf & Papierkorb */
.verlauf { list-style: none; padding: 0; margin: 20px 0; border-left: 2px solid var(--linie); }
.verlauf li { position: relative; padding: 0 0 20px 22px; }
.verlauf li::before { content: ""; position: absolute; left: -6px; top: 7px; width: 10px; height: 10px; border-radius: 50%; background: var(--grund); border: 2px solid var(--leise); }
.verlauf .verlauf-geloescht::before { border-color: var(--rot); }
.verlauf .verlauf-angelegt::before, .verlauf .verlauf-wiederhergestellt::before { border-color: var(--gruen); }
.verlauf-kopf { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.verlauf-kopf .marke-klein { margin-left: 0; }
.verlauf-vorher { margin-top: 8px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 8px; padding: 10px 14px; }
.verlauf-vorher summary { cursor: pointer; font-weight: 700; font-size: 13px; }
.verlauf-vorher pre { white-space: pre-wrap; font-size: 13px; color: var(--text-2); max-height: 260px; overflow: auto; }
.papierkorb-zeile { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px 18px; margin-bottom: 8px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px; }
.papierkorb-zeile form { margin: 0; }

/* ---------- Handy & Tablet ---------- */
@media (max-width: 1240px) {
  .hero-foto { left: 42%; width: 40%; }
  .hero-text { padding-left: clamp(24px, 6vw, 84px); max-width: 440px; }
}
@media (max-width: 980px) {
  .hero-seite { display: none; }
  .hero-foto { left: 44%; width: 56%; }
  .raster.vier, .linkliste { grid-template-columns: 1fr 1fr; }
  .raster.drei { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .kopf { gap: 14px; flex-wrap: wrap; }
  .burger { display: grid; }
  .menue { display: none; order: 10; flex-basis: 100%; flex-direction: column; gap: 0; padding: 6px 20px 14px; }
  .menue.offen { display: flex; }
  .menue a { padding: 12px 0; font-size: 16px; border-bottom: 1px solid var(--linie); }
  .menue a.aktiv::after { display: none; }
  .menue a.zur-seite { border-left: 0; padding-left: 0; }
  .name-marke, .bearbeiten span { display: none; }
  .kopf.auf-hero { position: relative; background: transparent; }
  .kopf.auf-hero .menue.offen { background: var(--grund); }
  .hero { min-height: 0; }
  .hero-foto { position: relative; left: 0; width: 100%; height: 360px; display: block; }
  .hero-text { padding: 12px 20px 32px; max-width: none; }
  .hero-leiste { position: relative; grid-template-columns: 1fr; }
  .hero-leiste .punkte { padding: 14px 20px; }
  .glas { grid-template-columns: 1fr; gap: 16px; padding: 20px; }
  .glas small { margin-bottom: -6px; }
  .hero-kontakt { min-height: 120px; }
  .zwei-spalten, .paar, .cv-kopf { grid-template-columns: 1fr; gap: 24px; }
  .abschnitt { padding-block: 56px; }
  .cv-foto { width: 100px; height: 100px; }
  .kacheln { grid-template-columns: 1fr 1fr; }
  .projekt-raster { grid-template-columns: 1fr; gap: 24px; }
  .bauteil-detail, .rezept-raster { grid-template-columns: 1fr; gap: 24px; }
  .zutaten-karte { position: static; }
  .paar.drei, .paar.vier { grid-template-columns: 1fr 1fr; }
  .bauteil-zeile { grid-template-columns: 56px minmax(0, 1fr); }
  .bauteil-bild { width: 56px; height: 56px; }
  .bauteil-zeile .anzahl { grid-column: 1 / -1; justify-self: end; }
  .stueckliste-kopf .knopfreihe, input.suche { width: 100%; }
  .abschnitt-nav { position: static; border-bottom: 1px solid var(--linie); padding-bottom: 18px; }
  .pdf-ansicht { height: 60vh; }
  .kachel .bald { display: none; }
  .login-karte { padding: 26px; }
  .profil-menue .name { display: none; }
}
@media (max-width: 480px) {
  .linkliste, .raster.vier { grid-template-columns: 1fr; }
  .sprache a { padding: 5px 6px; }
}