/*
 * Dateiname: style.css
 * Autorin: Jacqueline Rohde
 * Datum: 21.09.2026
 * Beschreibung:
 * Gestaltung für kobuero.de mit kompakter Typografie, dunklem Glamour-Auftritt,
 * responsivem Layout, farbigen Branchenkarten, gemeinsamen Kopf- und Fußzeilen,
 * einmaligen Scroll-Animationen sowie den abgestimmten Angebotsseiten.
 */
:root { --schrift:#20172a; --weinrot:#7138d0; --weinrot-dunkel:#241032; --koralle:#ff6b57; --tuerkis:#19d3c5; --pink:#dc4eb2; --hell:#fbfbff; --flaeche:#f3f0fb; --weiss:#fff; --grau:#655f70; --linie:#ded9e9; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--schrift); background:radial-gradient(circle at 7% 10%,rgba(25,211,197,.08),transparent 25%),radial-gradient(circle at 94% 28%,rgba(113,56,208,.09),transparent 28%),var(--hell); font-family:Arial,Helvetica,sans-serif; overflow-x:hidden; }
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
p,h1,h2,h3 { margin-top:0; }
.seitenkopf { position:relative; z-index:1000; height:76px; border-bottom:1px solid rgba(113,56,208,.12); background:rgba(251,251,255,.86); box-shadow:0 8px 35px rgba(36,16,50,.05); backdrop-filter:blur(14px); }
.kopf-inhalt { width:min(1180px,90%); height:100%; margin:0 auto; display:flex; align-items:center; justify-content:space-between; }
.logo { display:flex; align-items:center; gap:10px; font-size:19px; font-weight:800; }
.logo-zeichen { width:34px; height:34px; display:grid; place-items:center; color:var(--weiss); background:linear-gradient(135deg,var(--tuerkis),var(--weinrot) 52%,var(--pink)); border-radius:9px 9px 9px 3px; box-shadow:0 7px 22px rgba(113,56,208,.28),0 0 24px rgba(25,211,197,.18); font:italic 23px Georgia,serif; }
.desktop-navigation { display:flex; gap:30px; font-size:13px; font-weight:700; }
.desktop-navigation a { padding:29px 0 26px; border-bottom:2px solid transparent; }
.desktop-navigation a:hover,.desktop-navigation a.aktiv { color:var(--weinrot); border-color:var(--weinrot); }
.seiten-fuer-auswahl { position:relative; }
.seiten-fuer-auswahl summary { padding:29px 18px 26px 0; border-bottom:2px solid transparent; cursor:pointer; list-style:none; }
.seiten-fuer-auswahl summary::-webkit-details-marker { display:none; }
.seiten-fuer-auswahl summary::after { content:'⌄'; position:absolute; right:0; top:27px; color:var(--weinrot); font-size:14px; transition:transform .2s ease; }
.seiten-fuer-auswahl[open] summary,.seiten-fuer-auswahl.aktiv summary,.seiten-fuer-auswahl summary:hover { color:var(--weinrot); border-color:var(--weinrot); }
.seiten-fuer-auswahl[open] summary::after { transform:rotate(180deg); }
.seiten-fuer-menue { position:absolute; z-index:1300; top:67px; right:0; min-width:190px; padding:9px; background:rgba(255,255,255,.98); border:1px solid var(--linie); border-radius:11px; box-shadow:0 18px 45px rgba(36,16,50,.18); }
.seiten-fuer-menue a { display:block; padding:12px 13px; border:0; border-radius:7px; white-space:nowrap; }
.seiten-fuer-menue a:hover { color:var(--weinrot); background:var(--flaeche); border:0; }
.handy-navigation { display:none; }
.uebertitel { margin-bottom:16px; color:var(--weinrot); font-size:11px; font-weight:800; line-height:1.5; letter-spacing:1.7px; text-transform:uppercase; }
.schaltflaeche { display:inline-flex; padding:14px 20px; color:var(--weiss); background:linear-gradient(120deg,var(--weinrot),var(--pink) 58%,var(--koralle)); border-radius:8px; box-shadow:0 12px 30px rgba(113,56,208,.28),0 0 32px rgba(220,78,178,.20); font-size:13px; font-weight:800; transition:transform .2s ease,box-shadow .2s ease; }
.schaltflaeche:hover { transform:translateY(-2px); box-shadow:0 16px 38px rgba(113,56,208,.35),0 0 42px rgba(25,211,197,.22); }
.textlink { display:inline-block; margin-top:28px; padding-bottom:4px; color:var(--weinrot); border-bottom:1px solid rgba(116,51,76,.35); font-size:13px; font-weight:800; }
.bereich { padding:70px max(5vw,calc((100vw - 1180px)/2)); }
.bereich-kopf { display:grid; grid-template-columns:1fr .78fr; gap:8vw; align-items:end; margin-bottom:38px; }
.bereich-kopf h2,.ueber-mich-text h2,.abschluss h2 { margin-bottom:0; font-size:clamp(31px,3.2vw,44px); line-height:1.1; letter-spacing:-1.7px; }
.bereich-kopf>p { margin-bottom:0; color:var(--grau); line-height:1.7; }
.bereich-kopf.kompakt { display:block; max-width:690px; }
.startbereich { position:relative; isolation:isolate; width:min(1180px,90%); margin:0 auto; padding:68px 0 66px; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(320px,.75fr); gap:clamp(55px,7vw,100px); align-items:center; }
.startbereich::before { content:""; position:absolute; z-index:-2; top:-105px; right:-175px; width:540px; height:540px; border-radius:50%; background:radial-gradient(circle,rgba(25,211,197,.30) 0%,rgba(113,56,208,.13) 38%,rgba(113,56,208,0) 72%); filter:blur(10px); pointer-events:none; }
.startbereich::after { content:""; position:absolute; z-index:-2; left:12%; bottom:-105px; width:440px; height:250px; border-radius:50%; background:radial-gradient(ellipse,rgba(220,78,178,.20) 0%,rgba(255,107,87,.08) 38%,rgba(220,78,178,0) 72%); filter:blur(15px); pointer-events:none; }
.start-text { min-width:0; }
.start-text h1 { max-width:680px; margin-bottom:23px; font-size:clamp(42px,4.1vw,54px); line-height:1.07; letter-spacing:-2.3px; }
.einleitung { max-width:650px; margin-bottom:31px; color:var(--grau); font-size:17px; line-height:1.7; }
.start-hinweis { position:relative; padding:30px; background:linear-gradient(145deg,rgba(255,255,255,.78),rgba(240,245,255,.88)); border:1px solid rgba(113,56,208,.16); border-left:4px solid var(--tuerkis); border-radius:0 16px 16px 0; box-shadow:0 24px 60px rgba(36,16,50,.13),0 0 48px rgba(25,211,197,.18); backdrop-filter:blur(7px); }
.start-hinweis::after { content:""; position:absolute; z-index:-1; right:-34px; bottom:-34px; width:125px; height:125px; border-radius:50%; background:linear-gradient(135deg,rgba(25,211,197,.30),rgba(220,78,178,.24)); filter:blur(20px); pointer-events:none; }
.start-hinweis h2 { margin-bottom:14px; font:700 22px/1.28 Georgia,serif; }
.start-hinweis p { margin-bottom:0; color:var(--grau); font-size:14px; line-height:1.7; }
.leistungsraster { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--linie); border-left:1px solid var(--linie); }
.leistung { min-height:225px; padding:27px; background:rgba(255,255,255,.88); border-right:1px solid var(--linie); border-bottom:1px solid var(--linie); transition:transform .2s ease,box-shadow .2s ease; }
.leistung:hover { position:relative; z-index:2; transform:translateY(-4px); box-shadow:0 18px 42px rgba(36,16,50,.12),0 0 30px rgba(25,211,197,.13); }
.nummer { color:var(--koralle); font-size:11px; font-weight:800; }
.leistung h3 { margin:31px 0 12px; font-size:20px; }
.leistung p,.projekt p { margin-bottom:0; color:var(--grau); font-size:14px; line-height:1.65; }
.projekte { background:radial-gradient(circle at 90% 18%,rgba(25,211,197,.13),transparent 28%),linear-gradient(135deg,#f2effb,#eefafa); }
.projektliste { border-top:1px solid var(--linie); }
.projekt { display:grid; grid-template-columns:1fr auto; gap:30px; align-items:center; padding:27px 4px; border-bottom:1px solid var(--linie); }
.projekt h3 { margin-bottom:8px; font-size:22px; }
.projekt>a { color:var(--weinrot); font-size:12px; font-weight:800; }
.projekt>a:hover { text-decoration:underline; }
.ueber-mich-kurz { display:grid; grid-template-columns:280px 1fr; gap:7vw; align-items:center; }
.foto-rahmen { width:280px; height:335px; overflow:hidden; background:#ddd; border-radius:14px; box-shadow:18px 18px 0 rgba(25,211,197,.08),0 20px 55px rgba(36,16,50,.16),0 0 42px rgba(113,56,208,.16); }
.foto-rahmen img { width:100%; height:100%; object-fit:cover; object-position:50% 35%; }
.ueber-mich-text { max-width:650px; }
.ueber-mich-text h2 { margin-bottom:23px; }
.ueber-mich-text p:not(.uebertitel) { color:var(--grau); line-height:1.75; }
.ueber-mich-text .hervorgehoben { color:var(--schrift); font-size:18px; font-weight:700; }
.budget-bereich { display:grid; grid-template-columns:minmax(0,.9fr) minmax(340px,1.1fr); gap:clamp(55px,8vw,110px); align-items:start; }
.budget-kopf h2 { margin-bottom:0; max-width:570px; font-size:clamp(31px,3.2vw,44px); line-height:1.1; letter-spacing:-1.7px; }
.budget-text { max-width:610px; padding-top:31px; }
.budget-text p { color:var(--grau); line-height:1.75; }
.budget-text .hervorgehoben { margin-bottom:22px; color:var(--schrift); font-size:18px; font-weight:700; }
.abschluss { position:relative; isolation:isolate; overflow:hidden; padding:46px max(5vw,calc((100vw - 1180px)/2)); color:var(--weiss); background:radial-gradient(circle at 84% 18%,rgba(25,211,197,.40),transparent 25%),radial-gradient(circle at 68% 112%,rgba(255,107,87,.40),transparent 34%),linear-gradient(125deg,#20102e 0%,#5630a6 50%,#b62e9d 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 -18px 60px rgba(113,56,208,.18); }
.abschluss::before { content:""; position:absolute; z-index:-1; top:-135px; right:9%; width:285px; height:285px; border:1px solid rgba(255,255,255,.22); border-radius:50%; box-shadow:0 0 80px rgba(25,211,197,.38),inset 0 0 60px rgba(255,255,255,.07); pointer-events:none; }
.abschluss::after { content:""; position:absolute; z-index:-1; right:-75px; bottom:-160px; width:350px; height:350px; border-radius:50%; background:rgba(255,107,87,.24); box-shadow:0 0 95px rgba(220,78,178,.42); pointer-events:none; }
.abschluss .uebertitel { color:#8ff6ed; }
.abschluss h2 { max-width:700px; margin-bottom:14px; font-size:clamp(30px,3vw,42px); }
.abschluss>p:not(.uebertitel),.abschluss-inhalt>p:not(.uebertitel) { max-width:720px; color:rgba(255,255,255,.82); line-height:1.65; }
.abschluss .schaltflaeche { margin-top:10px; }
.schaltflaeche-hell { color:#3b1853; background:var(--weiss); box-shadow:0 14px 36px rgba(25,8,35,.28),0 0 34px rgba(255,255,255,.24); }
.schaltflaeche-hell:hover { color:#241032; background:#dffffb; }
.fussbereich { padding:34px 0; background:var(--weiss); }
.fuss-inhalt { width:min(1180px,90%); margin:0 auto; display:grid; grid-template-columns:auto 1fr auto auto; gap:30px; align-items:center; font-size:11px; }
.fuss-inhalt p { margin-bottom:0; color:var(--grau); line-height:1.5; }
.fuss-link { color:var(--weinrot); font-weight:800; }
.fuss-rechtliches { display:flex; gap:14px; flex-wrap:wrap; }
.fuss-rechtliches .fuss-link:hover { text-decoration:underline; }

/* Einmalige Bewegungen beim ersten Sichtbarwerden */
.js .scroll-effekt { opacity:0; transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.2,1); will-change:opacity,transform; }
.js .scroll-effekt.von-unten { transform:translateY(42px); }
.js .scroll-effekt.von-links { transform:translateX(-48px); }
.js .scroll-effekt.von-rechts { transform:translateX(48px); }
.js .scroll-effekt.ist-sichtbar { opacity:1; transform:translate(0,0); will-change:auto; }
.js .scroll-effekt.verzoegerung-1 { transition-delay:.14s; }
.js .scroll-effekt.verzoegerung-2 { transition-delay:.28s; }

@media (max-width:850px) {
 .desktop-navigation{display:none}.handy-navigation{position:relative;z-index:1100;display:block;font-size:13px;font-weight:800}.handy-navigation summary{cursor:pointer;list-style:none}.handy-navigation summary::-webkit-details-marker{display:none}.handy-navigation[open] .handy-menue{position:absolute;z-index:1200;top:35px;right:0;width:210px;padding:10px;background:var(--weiss);border:1px solid var(--linie);border-radius:10px;box-shadow:0 16px 42px rgba(36,16,50,.20)}.handy-menue a{position:relative;z-index:1201;display:block;padding:12px 11px}.handy-menue a:hover,.handy-menue a:focus{color:var(--weinrot);background:var(--flaeche);border-radius:7px}.handy-menue-titel{display:block;margin:7px 11px 2px;padding-top:11px;color:var(--grau);border-top:1px solid var(--linie);font-size:10px;letter-spacing:1.2px;text-transform:uppercase}.handy-menue .handy-unterpunkt{padding-left:20px;color:var(--weinrot)}
 .startbereich{grid-template-columns:1fr;gap:38px;padding:55px 0}.start-text h1{max-width:650px;font-size:clamp(40px,7vw,50px)}.start-hinweis{max-width:650px}.bereich-kopf{grid-template-columns:1fr;gap:18px}.leistungsraster{grid-template-columns:1fr 1fr}.start-leistungsraster{grid-template-columns:repeat(3,1fr)}.ueber-mich-kurz{grid-template-columns:250px 1fr;gap:6vw}.foto-rahmen{width:250px;height:300px}.budget-bereich{grid-template-columns:minmax(0,.9fr) minmax(300px,1.1fr);gap:6vw}.fuss-inhalt{grid-template-columns:1fr 1fr}
}

/* =========================================================
   Kompakte Startseite mit grafischer Branchenübersicht
   Stand: 21.09.2026
   ========================================================= */
.startbereich-neu{grid-template-columns:minmax(0,1.02fr) minmax(360px,.78fr);padding-top:74px;padding-bottom:74px}
.start-aktionen{display:flex;align-items:center;gap:25px;flex-wrap:wrap}.start-aktionen .textlink{margin-top:0}
.start-visual{position:relative;overflow:hidden;background:rgba(255,255,255,.92);border:1px solid rgba(113,56,208,.16);border-radius:18px;box-shadow:0 28px 70px rgba(36,16,50,.16),18px 18px 0 rgba(25,211,197,.07),0 0 55px rgba(113,56,208,.1);transform:rotate(1deg)}
.start-visual:after{content:'';position:absolute;right:-55px;bottom:-65px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(220,78,178,.26),transparent 68%);pointer-events:none}
.visual-browserkopf{display:flex;align-items:center;gap:7px;padding:13px 17px;background:#291638;color:#fff}.visual-browserkopf i{width:8px;height:8px;border-radius:50%;background:var(--koralle)}.visual-browserkopf i:nth-child(2){background:#f2bf52}.visual-browserkopf i:nth-child(3){background:var(--tuerkis)}.visual-browserkopf span{margin-left:auto;color:rgba(255,255,255,.58);font-size:10px;letter-spacing:1px}
.visual-inhalt{padding:34px}.visual-inhalt>p{margin-bottom:24px;font:700 27px/1.25 Georgia,serif}.visual-branchen{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px}.visual-branchen span{padding:9px 11px;background:linear-gradient(120deg,rgba(113,56,208,.1),rgba(25,211,197,.1));border:1px solid rgba(113,56,208,.12);border-radius:7px;color:#4d2860;font-size:11px;font-weight:800}.visual-inhalt strong,.visual-inhalt small{display:block}.visual-inhalt strong{padding-top:18px;border-top:1px solid var(--linie);font-size:13px}.visual-inhalt small{margin-top:7px;color:var(--grau);font-size:10px;line-height:1.5}

.branchenbereich{background:radial-gradient(circle at 91% 8%,rgba(25,211,197,.15),transparent 25%),linear-gradient(145deg,#f4f0fb,#effafa)}
.branchenraster{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}.branchenkarte{position:relative;isolation:isolate;overflow:hidden;min-height:310px;padding:28px;color:#fff;border-radius:16px;box-shadow:0 18px 45px rgba(36,16,50,.13);transition:transform .22s ease,box-shadow .22s ease}.branchenkarte:hover{transform:translateY(-5px);box-shadow:0 25px 55px rgba(36,16,50,.2)}
.branchenkarte:before,.branchenkarte:after{content:'';position:absolute;z-index:-1;border-radius:50%;pointer-events:none}.branchenkarte:before{right:-50px;top:-65px;width:185px;height:185px;border:1px solid rgba(255,255,255,.2);box-shadow:0 0 60px rgba(255,255,255,.13)}.branchenkarte:after{left:-45px;bottom:-70px;width:170px;height:170px;background:rgba(255,255,255,.09);filter:blur(4px)}
.branche-gastro,.branche-beauty{grid-column:span 3}.branche-handwerk,.branche-kultur,.branche-tier{grid-column:span 2}
.branche-gastro{background:linear-gradient(135deg,#4a1f35,#a2455b 57%,#d88258)}.branche-beauty{background:linear-gradient(135deg,#3d205d,#9a3ea0 57%,#e06d9c)}.branche-handwerk{background:linear-gradient(135deg,#173b4b,#176f78 58%,#23a99c)}.branche-kultur{background:linear-gradient(135deg,#261644,#5932a4 55%,#cc3c9e)}.branche-tier{background:linear-gradient(135deg,#244231,#387e64 55%,#65ad77)}
.branchen-symbol{display:grid;place-items:center;width:49px;height:49px;margin-bottom:43px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.26);border-radius:14px 14px 14px 4px;box-shadow:0 10px 30px rgba(0,0,0,.12),0 0 26px rgba(255,255,255,.09);font:italic 25px Georgia,serif}
.branchen-label{margin-bottom:9px!important;color:rgba(255,255,255,.7);font-size:9px!important;font-weight:900;letter-spacing:1.4px;text-transform:uppercase}.branchenkarte h3,.branchenkarte summary>strong{display:block;margin:0 0 13px;font-size:clamp(22px,2.1vw,29px);line-height:1.12;letter-spacing:-.7px}.branchenkarte>p:not(.branchen-label),.branchen-kurztext{display:block;max-width:520px;margin-bottom:24px;color:rgba(255,255,255,.8);font-size:13px;line-height:1.62}.branchenkarte>a{position:absolute;left:28px;bottom:27px;padding-bottom:3px;border-bottom:1px solid rgba(255,255,255,.48);font-size:12px;font-weight:900}.branchenkarte>a span{margin-left:5px}
.branchenkarte summary{list-style:none;cursor:pointer}.branchenkarte summary::-webkit-details-marker{display:none}.branchenkarte summary .branchen-symbol{display:grid}.branchen-oeffnen{display:flex;align-items:center;justify-content:space-between;margin-top:22px;padding-top:17px;border-top:1px solid rgba(255,255,255,.18);font-size:11px;font-weight:900}.branchen-oeffnen i{display:grid;place-items:center;width:25px;height:25px;background:rgba(255,255,255,.13);border-radius:50%;font-size:17px;font-style:normal;transition:transform .2s ease}.branchenkarte[open] .branchen-oeffnen i{transform:rotate(45deg)}
.branchen-details{display:flex;gap:7px;flex-wrap:wrap;margin-top:20px;padding-top:20px;border-top:1px solid rgba(255,255,255,.2)}.branchen-details span{padding:7px 9px;background:rgba(255,255,255,.11);border-radius:6px;color:rgba(255,255,255,.9);font-size:10px;font-weight:700}.branchenkarte[open]{grid-column:span 3;min-height:365px}.branchen-hinweis{max-width:850px;margin:30px 0 0;padding:16px 20px;background:rgba(255,255,255,.65);border-left:4px solid var(--koralle);color:var(--grau);font-size:13px;line-height:1.65}

.leistungen-kompakt{background:#fff}.kompakt-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linie);border:1px solid var(--linie)}.kompakt-raster article{min-height:160px;padding:25px;background:#fff}.kompakt-raster span{color:var(--koralle);font-size:10px;font-weight:900}.kompakt-raster h3{margin:27px 0 9px;font-size:19px}.kompakt-raster p{margin:0;color:var(--grau);font-size:13px;line-height:1.6}
.projekt-highlight{display:grid;grid-template-columns:1fr .8fr;gap:clamp(50px,8vw,105px);align-items:center;background:radial-gradient(circle at 88% 15%,rgba(25,211,197,.23),transparent 30%),linear-gradient(135deg,#f0ecfa,#eaf9f7)}.projekt-highlight-text{max-width:650px}.projekt-highlight-text h2{margin-bottom:18px;font-size:clamp(31px,3.2vw,44px);line-height:1.1;letter-spacing:-1.5px}.projekt-highlight-text>p:not(.uebertitel){color:var(--grau);line-height:1.75}
.projekt-miniatur{padding:27px;background:#fff;border:1px solid rgba(113,56,208,.13);border-radius:15px;box-shadow:0 24px 60px rgba(36,16,50,.14);transform:rotate(1deg)}.projekt-miniatur>span{display:block;margin-bottom:17px;color:var(--weinrot);font-size:10px;font-weight:900;letter-spacing:1.4px;text-transform:uppercase}.projekt-miniatur>div{position:relative;display:grid;grid-template-columns:15px 1fr;gap:0 11px;padding:14px 4px;border-top:1px solid var(--linie)}.projekt-miniatur i{grid-row:span 2;width:11px;height:11px;margin-top:3px;border-radius:4px;background:linear-gradient(135deg,var(--tuerkis),var(--weinrot))}.projekt-miniatur b{font-size:13px}.projekt-miniatur small{color:var(--grau);font-size:10px}
.ueber-mich-kompakt .foto-rahmen{height:300px}.keine-pauschale{margin-top:20px;padding:15px 18px;background:linear-gradient(90deg,rgba(113,56,208,.075),rgba(25,211,197,.08));border-left:4px solid var(--tuerkis);font-size:13px}.keine-pauschale strong{color:var(--schrift)}

@media(max-width:900px){.startbereich-neu{grid-template-columns:1fr}.start-visual{max-width:650px}.branchenraster{grid-template-columns:1fr 1fr}.branche-gastro,.branche-beauty,.branche-handwerk,.branche-kultur,.branche-tier,.branchenkarte[open]{grid-column:span 1}.branche-tier{grid-column:1/-1}.projekt-highlight{grid-template-columns:1fr}.projekt-miniatur{max-width:600px}}
@media(max-width:600px){.startbereich-neu{padding-top:47px;padding-bottom:52px}.start-aktionen{align-items:flex-start;flex-direction:column;gap:18px}.visual-inhalt{padding:25px}.visual-inhalt>p{font-size:23px}.start-visual{transform:none}.branchenraster{grid-template-columns:1fr}.branche-gastro,.branche-beauty,.branche-handwerk,.branche-kultur,.branche-tier,.branchenkarte[open]{grid-column:1}.branchenkarte{min-height:295px;padding:24px}.branchenkarte>a{left:24px;bottom:24px}.branchen-symbol{margin-bottom:34px}.kompakt-raster{grid-template-columns:1fr}.kompakt-raster article{min-height:auto}.projekt-highlight{gap:34px}.projekt-miniatur{transform:none}.ueber-mich-kompakt .foto-rahmen{height:280px}}
@media (max-width:600px) {
 .seitenkopf{height:68px}.kopf-inhalt{width:calc(100% - 40px)}.logo{font-size:17px}.startbereich{width:calc(100% - 40px);padding:43px 0 48px;gap:30px}.startbereich::before{top:-40px;right:-170px;width:360px;height:360px}.startbereich::after{left:-80px;bottom:-70px;width:300px;height:190px}.uebertitel{margin-bottom:13px;font-size:10px;letter-spacing:1.4px}.start-text h1{margin-bottom:20px;font-size:clamp(34px,10vw,39px);line-height:1.08;letter-spacing:-1.7px}.einleitung{margin-bottom:27px;font-size:16px;line-height:1.65}.start-hinweis{padding:23px 21px}.start-hinweis h2{font-size:21px}.start-hinweis::after{right:-18px;bottom:-20px;width:90px;height:90px}.bereich{padding:55px 20px}.bereich-kopf h2,.ueber-mich-text h2,.budget-kopf h2,.abschluss h2{font-size:32px;line-height:1.12;letter-spacing:-1.2px}.leistungsraster,.start-leistungsraster{grid-template-columns:1fr}.leistung{min-height:auto}.projekt{grid-template-columns:1fr}.ueber-mich-kurz,.budget-bereich{grid-template-columns:1fr}.budget-bereich{gap:25px}.budget-text{max-width:none;padding-top:0}.foto-rahmen{width:230px;max-width:100%;height:280px;margin:0 auto}.abschluss{padding:42px 20px}.fussbereich{padding:30px 20px}.fuss-inhalt{width:100%;grid-template-columns:1fr;justify-items:center;text-align:center}
 .js .scroll-effekt.von-links,.js .scroll-effekt.von-rechts{transform:translateY(32px)}
 .js .scroll-effekt.ist-sichtbar{transform:translate(0,0)}
}
@media (prefers-reduced-motion:reduce) {
 html{scroll-behavior:auto}
 .js .scroll-effekt,.js .scroll-effekt.von-unten,.js .scroll-effekt.von-links,.js .scroll-effekt.von-rechts{opacity:1;transform:none;transition:none}
}

/* Angebotsseite für Restaurant-Webseiten */
.restaurant-angebot-hero{position:relative;isolation:isolate;min-height:590px;padding:74px max(5vw,calc((100vw - 1180px)/2));display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.65fr);gap:clamp(50px,8vw,105px);align-items:center;color:#fff;background:linear-gradient(90deg,rgba(21,10,32,.96),rgba(37,13,58,.86) 50%,rgba(21,10,32,.52)),url('restaurant-demo/bilder/restaurant-hero.png') center/cover;overflow:hidden}.restaurant-angebot-hero:after{content:'';position:absolute;z-index:-1;right:5%;top:8%;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(25,211,197,.27),rgba(220,78,178,.14) 48%,transparent 72%);filter:blur(8px)}.restaurant-hero-text{max-width:720px}.restaurant-hero-text .uebertitel{color:#91fff4}.restaurant-hero-text h1{margin-bottom:24px;color:#fff;font-size:clamp(43px,5vw,67px);line-height:1.03;letter-spacing:-2.8px;text-shadow:0 3px 22px rgba(0,0,0,.28)}.restaurant-hero-text h1 span{color:#ffd0a1;text-shadow:0 0 13px rgba(255,182,119,.68),0 0 34px rgba(220,78,178,.34)}.restaurant-hero-text .einleitung{color:rgba(255,255,255,.86)}.restaurant-hero-aktionen{display:flex;align-items:center;gap:24px;flex-wrap:wrap}.restaurant-demo-link{padding-bottom:3px;border-bottom:1px solid rgba(255,255,255,.45);font-size:13px;font-weight:800}.restaurant-preisbox{padding:32px;background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(238,250,250,.95));color:var(--schrift);border:1px solid rgba(255,255,255,.6);border-radius:18px;box-shadow:0 28px 70px rgba(12,5,20,.35),0 0 55px rgba(25,211,197,.15);backdrop-filter:blur(12px)}.restaurant-preisbox>span{color:var(--weinrot);font-size:10px;font-weight:900;letter-spacing:1.8px}.restaurant-preisbox>strong{display:block;margin:4px 0 0;font-size:57px;line-height:1}.restaurant-preisbox>small{display:block;margin-top:6px;color:var(--grau)}.restaurant-preisbox hr{margin:24px 0;border:0;border-top:1px solid var(--linie)}.restaurant-preisbox p{margin:7px 0;font-size:14px}.restaurant-preisbox em{display:block;margin-top:22px;padding:12px;color:#174740;background:#def8f3;border-left:3px solid var(--tuerkis);font-size:12px;font-style:normal;font-weight:800;line-height:1.5}
.restaurant-auswahl{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linie);border:1px solid var(--linie)}.restaurant-auswahl article{min-height:205px;padding:26px;background:rgba(255,255,255,.94)}.restaurant-auswahl i{display:grid;place-items:center;width:28px;height:28px;color:#fff;background:linear-gradient(135deg,var(--tuerkis),var(--weinrot));border-radius:50%;font-size:12px;font-style:normal}.restaurant-auswahl h3{margin:26px 0 10px;font-size:19px}.restaurant-auswahl p{margin:0;color:var(--grau);font-size:14px;line-height:1.65}
.restaurant-selbstpflege{padding:80px max(5vw,calc((100vw - 1180px)/2));display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(55px,8vw,105px);align-items:center;background:linear-gradient(135deg,#21102f,#5530a4);color:#fff}.restaurant-admin-bild{padding:25px;background:#f7f6fb;color:var(--schrift);border-radius:15px;box-shadow:0 25px 65px rgba(10,3,17,.35),0 0 50px rgba(25,211,197,.16);transform:rotate(-1deg)}.restaurant-admin-bild>span{color:var(--weinrot);font-size:10px;font-weight:900;letter-spacing:1.7px}.admin-mini{margin:18px 0}.admin-mini p{position:relative;margin:0;padding:15px 14px 15px 43px;border-top:1px solid var(--linie)}.admin-mini i{position:absolute;left:14px;top:20px;width:10px;height:10px;border-radius:50%;background:#37bd81;box-shadow:0 0 12px rgba(55,189,129,.4)}.admin-mini b,.admin-mini small{display:block}.admin-mini b{font-size:13px}.admin-mini small{margin-top:3px;color:var(--grau);font-size:11px}.restaurant-admin-bild>a{color:var(--weinrot);font-size:12px;font-weight:800}.restaurant-admin-text h2{max-width:650px;margin-bottom:23px;font-size:clamp(31px,3.4vw,46px);line-height:1.08;letter-spacing:-1.6px}.restaurant-admin-text .uebertitel{color:#8ff6ed}.restaurant-admin-text>p:not(.uebertitel){color:rgba(255,255,255,.78);line-height:1.75}.restaurant-admin-text .restaurant-hervorgehoben{padding:13px 0 13px 18px;color:#fff!important;border-left:3px solid var(--koralle);font-size:17px;font-weight:800}
.restaurant-enthalten-kopf{max-width:650px;margin-bottom:38px}.restaurant-enthalten-kopf h2,.restaurant-ablauf-kopf h2,.restaurant-grenzen h2{margin-bottom:0;font-size:clamp(31px,3.4vw,46px);line-height:1.08;letter-spacing:-1.6px}.restaurant-paket{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(45px,7vw,90px)}.restaurant-paket ul{display:grid;grid-template-columns:1fr 1fr;gap:0 35px;margin:0;padding:0;list-style:none}.restaurant-paket li{position:relative;padding:15px 0 15px 29px;border-top:1px solid var(--linie);font-size:14px;line-height:1.5}.restaurant-paket li:before{content:'✓';position:absolute;left:3px;color:var(--weinrot);font-weight:900}.restaurant-paket aside{padding:27px;background:linear-gradient(145deg,#edfdfa,#f4effc);border-left:4px solid var(--tuerkis);border-radius:0 13px 13px 0}.restaurant-paket aside h3{font:700 22px Georgia,serif}.restaurant-paket aside p{color:var(--grau);font-size:14px;line-height:1.7}
.restaurant-ablauf{padding:76px max(5vw,calc((100vw - 1180px)/2));background:radial-gradient(circle at 90% 10%,rgba(25,211,197,.16),transparent 28%),var(--flaeche)}.restaurant-ablauf-kopf{max-width:700px;margin-bottom:38px}.restaurant-ablauf ol{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0;padding:0;list-style:none}.restaurant-ablauf li{padding:25px;background:#fff;border:1px solid var(--linie);border-radius:10px}.restaurant-ablauf li>span{display:grid;place-items:center;width:38px;height:38px;color:#fff;background:linear-gradient(135deg,var(--weinrot),var(--pink),var(--koralle));border-radius:10px 10px 10px 3px;font-size:14px;font-weight:900}.restaurant-ablauf h3{margin:27px 0 10px;font-size:18px}.restaurant-ablauf li p{margin:0;color:var(--grau);font-size:13px;line-height:1.65}
.restaurant-grenzen{padding:65px max(5vw,calc((100vw - 1180px)/2));display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(50px,8vw,105px);background:#fff}.restaurant-grenzen>div:last-child{padding-top:29px}.restaurant-grenzen>div:last-child p{color:var(--grau);line-height:1.75}.restaurant-abschluss{padding-top:58px;padding-bottom:58px}.restaurant-abschluss h2{max-width:760px}
@media(max-width:900px){.restaurant-angebot-hero{grid-template-columns:1fr}.restaurant-preisbox{max-width:430px}.restaurant-auswahl{grid-template-columns:1fr 1fr}.restaurant-selbstpflege,.restaurant-paket,.restaurant-grenzen{grid-template-columns:1fr}.restaurant-admin-bild{max-width:580px}.restaurant-paket ul{grid-template-columns:1fr}.restaurant-ablauf ol{grid-template-columns:1fr 1fr}.restaurant-grenzen>div:last-child{padding-top:0}}
@media(max-width:600px){.restaurant-angebot-hero{min-height:auto;padding:55px 20px}.restaurant-hero-text h1{font-size:clamp(38px,12vw,49px);letter-spacing:-2px}.restaurant-hero-aktionen{align-items:flex-start;flex-direction:column}.restaurant-preisbox{padding:25px}.restaurant-auswahl{grid-template-columns:1fr}.restaurant-auswahl article{min-height:auto}.restaurant-selbstpflege{padding:58px 20px}.restaurant-admin-bild{padding:20px;transform:none}.restaurant-enthalten-kopf h2,.restaurant-ablauf-kopf h2,.restaurant-grenzen h2,.restaurant-admin-text h2{font-size:32px}.restaurant-ablauf{padding:55px 20px}.restaurant-ablauf ol{grid-template-columns:1fr}.restaurant-grenzen{padding:55px 20px}.restaurant-abschluss{padding-top:48px;padding-bottom:48px}}

/* Kompakte KoBuero-Vorstellung und klare Kennzeichnung der Restaurant-Demo */
.restaurant-kurzpaket{padding:70px max(5vw,calc((100vw - 1180px)/2));display:grid;grid-template-columns:1fr 1fr;gap:clamp(55px,8vw,100px);align-items:center;background:#fff}.restaurant-kurzpaket h2,.restaurant-demo-text h2{margin-bottom:20px;font-size:clamp(31px,3.4vw,46px);line-height:1.08;letter-spacing:-1.6px}.restaurant-kurzpaket>div:first-child>p:not(.uebertitel){color:var(--grau);line-height:1.75}.restaurant-kurzliste{padding:10px 28px;background:linear-gradient(145deg,#edfdfa,#f5effc);border-left:4px solid var(--tuerkis);border-radius:0 14px 14px 0}.restaurant-kurzliste p{position:relative;margin:0;padding:16px 0 16px 27px;border-bottom:1px solid rgba(113,56,208,.12);font-size:14px;font-weight:700}.restaurant-kurzliste p:last-child{border-bottom:0}.restaurant-kurzliste p:before{content:'✓';position:absolute;left:0;color:var(--weinrot);font-weight:900}
.restaurant-demo-vorschau{padding:80px max(5vw,calc((100vw - 1180px)/2));display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(50px,7vw,90px);align-items:center;background:radial-gradient(circle at 8% 10%,rgba(25,211,197,.15),transparent 27%),var(--flaeche)}.restaurant-demo-bild{position:relative;overflow:hidden;min-height:500px;border-radius:15px;box-shadow:0 25px 65px rgba(36,16,50,.18),18px 18px 0 rgba(25,211,197,.09)}.restaurant-demo-bild img{position:absolute;width:100%;height:100%;object-fit:cover}.restaurant-demo-text>p:not(.uebertitel){color:var(--grau);line-height:1.72}.demo-klarstellung{margin:25px 0;padding:22px 23px;background:#fff;border:1px solid rgba(113,56,208,.17);border-left:5px solid var(--koralle);box-shadow:0 12px 35px rgba(36,16,50,.07)}.demo-klarstellung strong{display:block;margin-bottom:8px;color:var(--weinrot);font-size:14px}.demo-klarstellung p{margin:8px 0;color:var(--grau);font-size:13px;line-height:1.65}.restaurant-demo-aktionen{display:flex;align-items:center;gap:22px;flex-wrap:wrap}.restaurant-demo-link-dunkel{padding-bottom:3px;color:var(--weinrot);border-bottom:1px solid rgba(113,56,208,.35);font-size:12px;font-weight:800}
@media(max-width:900px){.desktop-navigation{gap:18px}.restaurant-kurzpaket,.restaurant-demo-vorschau{grid-template-columns:1fr}.restaurant-demo-bild{min-height:400px;max-width:650px}}
@media(max-width:600px){.restaurant-kurzpaket,.restaurant-demo-vorschau{padding:55px 20px}.restaurant-kurzpaket h2,.restaurant-demo-text h2{font-size:32px}.restaurant-demo-bild{min-height:310px}.restaurant-kurzliste{padding-left:20px;padding-right:20px}.restaurant-demo-aktionen{align-items:flex-start;flex-direction:column}}

/* =========================================================
   KoBuero für die Gastronomie
   Individuelle Angebotsseite vom 19.09.2026
   ========================================================= */
.gastro-hero{position:relative;isolation:isolate;min-height:650px;padding:82px max(5vw,calc((100vw - 1180px)/2));display:grid;grid-template-columns:minmax(0,1.18fr) minmax(320px,.68fr);gap:clamp(55px,8vw,110px);align-items:center;color:#fff;background:linear-gradient(90deg,rgba(24,10,37,.97),rgba(54,19,72,.85) 54%,rgba(25,10,36,.48)),url('restaurant-demo/bilder/restaurant-hero.png') center/cover;overflow:hidden}
.gastro-hero:before{content:'';position:absolute;z-index:-1;left:8%;bottom:-210px;width:430px;height:430px;border-radius:50%;background:radial-gradient(circle,rgba(220,78,178,.34),transparent 68%);filter:blur(12px)}
.gastro-hero:after{content:'';position:absolute;z-index:-1;right:5%;top:4%;width:350px;height:350px;border-radius:50%;background:radial-gradient(circle,rgba(25,211,197,.27),rgba(113,56,208,.12) 48%,transparent 72%);filter:blur(9px)}
.gastro-hero-text{max-width:720px}.gastro-hero-text .uebertitel{color:#8ff6ed}.gastro-hero h1{margin-bottom:26px;color:#fff;font-size:clamp(44px,5.2vw,70px);line-height:1.01;letter-spacing:-3px;text-shadow:0 4px 24px rgba(0,0,0,.3)}
.gastro-einleitung{max-width:700px;margin-bottom:17px;color:rgba(255,255,255,.88);font-size:17px;line-height:1.72}.gastro-persoenlich{max-width:650px;margin-bottom:31px;color:#ffd9ae;font-size:15px;font-weight:700;line-height:1.65}
.gastro-hero-aktionen{display:flex;align-items:center;gap:25px;flex-wrap:wrap}.gastro-textlink-hell{padding-bottom:4px;color:#fff;border-bottom:1px solid rgba(255,255,255,.48);font-size:13px;font-weight:800}
.gastro-preisbox{padding:34px;background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(232,250,249,.95));color:var(--schrift);border:1px solid rgba(255,255,255,.68);border-radius:19px;box-shadow:0 30px 75px rgba(12,5,20,.4),0 0 55px rgba(25,211,197,.14);backdrop-filter:blur(12px)}
.gastro-preisbox>span{display:block;color:var(--weinrot);font-size:10px;font-weight:900;line-height:1.5;letter-spacing:1.7px}.gastro-preisbox>strong{display:inline-block;margin-top:8px;font-size:61px;line-height:1}.gastro-preisbox>small{margin-left:6px;color:var(--grau);font-size:14px}.gastro-preisbox>b{display:block;margin-top:8px;font-size:18px}.gastro-preisbox>p{margin:3px 0 0;color:var(--grau);font-size:11px}.gastro-preisbox hr{margin:24px 0 18px;border:0;border-top:1px solid var(--linie)}
.gastro-preisbox ul{display:grid;gap:10px;margin:0;padding:0;list-style:none}.gastro-preisbox li{position:relative;padding-left:25px;font-size:13px;font-weight:700;line-height:1.45}.gastro-preisbox li:before{content:'✓';position:absolute;left:0;color:#159d8f;font-weight:900}.gastro-zusatzmodule{margin-top:22px;padding:15px 16px;background:rgba(113,56,208,.075);border:1px solid rgba(113,56,208,.12);border-radius:10px}.gastro-zusatzmodule span{display:block;margin-bottom:7px;color:var(--weinrot);font-size:9px;font-weight:900;letter-spacing:1.3px}.gastro-zusatzmodule p{margin:0;color:var(--schrift);font-size:12px;line-height:1.5}.gastro-zusatzmodule small{display:block;margin-top:5px;color:var(--grau);font-size:10px;line-height:1.5}.gastro-preisbox em{display:block;margin-top:18px;padding:13px 15px;color:#4c265c;background:linear-gradient(120deg,#efe5ff,#dff9f5);border-left:3px solid var(--tuerkis);font:700 13px/1.5 Georgia,serif}

.gastro-kein-baukasten{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(55px,8vw,105px);align-items:center;background:#fff}.gastro-zitat{padding:34px;background:linear-gradient(145deg,#25112f,#5b31a9);color:#fff;border-radius:17px;box-shadow:0 24px 60px rgba(36,16,50,.2),16px 16px 0 rgba(25,211,197,.08);transform:rotate(-1deg)}.gastro-zitat span{color:#8ff6ed;font-size:10px;font-weight:900;letter-spacing:1.7px}.gastro-zitat blockquote{margin:23px 0 0;font:700 clamp(23px,2.4vw,32px)/1.35 Georgia,serif}.gastro-kein-baukasten-text h2,.gastro-reservierung h2,.gastro-preis-und-suche h2{margin-bottom:22px;font-size:clamp(31px,3.4vw,46px);line-height:1.08;letter-spacing:-1.7px}.gastro-kein-baukasten-text>p:not(.uebertitel),.gastro-reservierung-text>p:not(.uebertitel),.gastro-preistext>p:not(.uebertitel){color:var(--grau);line-height:1.75}

.gastro-inspiration{background:radial-gradient(circle at 91% 9%,rgba(25,211,197,.15),transparent 25%),var(--flaeche)}.gastro-ideenraster{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.gastro-ideenkarte{min-height:220px;padding:27px;background:rgba(255,255,255,.94);border:1px solid rgba(113,56,208,.12);border-radius:12px;box-shadow:0 12px 30px rgba(36,16,50,.055);transition:transform .2s ease,box-shadow .2s ease}.gastro-ideenkarte:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(36,16,50,.11)}.gastro-ideenkarte>span{display:grid;place-items:center;width:32px;height:32px;color:#fff;background:linear-gradient(135deg,var(--tuerkis),var(--weinrot),var(--pink));border-radius:9px 9px 9px 3px;font-size:10px;font-weight:900}.gastro-ideenkarte h3{margin:25px 0 10px;font-size:19px}.gastro-ideenkarte p{margin:0;color:var(--grau);font-size:14px;line-height:1.65}.gastro-kann-muss-nicht{margin:29px 0 0;padding:16px 20px;color:#492460;background:linear-gradient(90deg,rgba(113,56,208,.09),rgba(25,211,197,.09));border-left:4px solid var(--koralle);font:700 17px/1.55 Georgia,serif}

.gastro-adminbereich{padding:82px max(5vw,calc((100vw - 1180px)/2));display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(55px,8vw,105px);align-items:center;color:#fff;background:radial-gradient(circle at 12% 90%,rgba(25,211,197,.22),transparent 27%),linear-gradient(135deg,#21102f,#5530a4)}.gastro-admin-demo{padding:27px;background:#f8f7fc;color:var(--schrift);border-radius:16px;box-shadow:0 26px 68px rgba(10,3,17,.4),0 0 50px rgba(25,211,197,.13);transform:rotate(-1deg)}.gastro-admin-kopf{padding:5px 4px 21px}.gastro-admin-kopf span,.gastro-admin-kopf b{display:block}.gastro-admin-kopf span{color:var(--weinrot);font-size:10px;font-weight:900;letter-spacing:1.6px}.gastro-admin-kopf b{margin-top:7px;font:700 23px Georgia,serif}.gastro-admin-zeile{display:grid;grid-template-columns:14px 1fr;gap:15px;padding:17px 5px;border-top:1px solid var(--linie)}.gastro-admin-zeile i{width:12px;height:12px;margin-top:4px;border-radius:4px;background:linear-gradient(135deg,var(--tuerkis),var(--weinrot));box-shadow:0 0 12px rgba(25,211,197,.32)}.gastro-admin-zeile b,.gastro-admin-zeile small{display:block}.gastro-admin-zeile b{font-size:14px}.gastro-admin-zeile small{margin-top:4px;color:var(--grau);font-size:11px;line-height:1.5}.gastro-admin-text h2{max-width:660px;margin-bottom:23px;font-size:clamp(32px,3.5vw,48px);line-height:1.07;letter-spacing:-1.7px}.gastro-admin-text .uebertitel{color:#8ff6ed}.gastro-admin-text>p:not(.uebertitel){color:rgba(255,255,255,.8);line-height:1.75}.gastro-admin-text .gastro-hervorgehoben{padding:14px 0 14px 19px;color:#fff!important;border-left:3px solid var(--koralle);font-size:17px;font-weight:800}

.gastro-reservierung{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(55px,8vw,105px);align-items:center;background:#fff}.gastro-reservierung-text small{display:block;margin-top:23px;padding:15px 17px;color:var(--grau);background:var(--flaeche);border-radius:9px;font-size:11px;line-height:1.6}.gastro-reservierung-liste{padding:31px;background:linear-gradient(145deg,#f0ecfb,#eafaf8);border:1px solid rgba(113,56,208,.15);border-radius:16px;box-shadow:0 24px 60px rgba(36,16,50,.13)}.gastro-status{display:inline-block;padding:6px 9px;color:#fff;border-radius:6px;font-size:9px;font-weight:900;letter-spacing:1.1px}.gastro-status.neu{background:var(--weinrot)}.gastro-reservierung-liste h3{margin:19px 0 16px;font-size:25px}.gastro-reservierung-liste dl{margin:0}.gastro-reservierung-liste dl>div{display:grid;grid-template-columns:90px 1fr;padding:12px 0;border-top:1px solid rgba(113,56,208,.14)}.gastro-reservierung-liste dt{color:var(--grau);font-size:12px}.gastro-reservierung-liste dd{margin:0;font-size:13px;font-weight:800}.gastro-statuszeile{display:flex;gap:8px;margin-top:20px;flex-wrap:wrap}.gastro-statuszeile span{padding:9px 11px;color:#fff;background:#39224c;border-radius:7px;font-size:10px;font-weight:800}.gastro-statuszeile span:first-child{background:#159d8f}

.gastro-beispiel{padding:82px max(5vw,calc((100vw - 1180px)/2));display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(55px,7vw,95px);align-items:center;background:radial-gradient(circle at 7% 11%,rgba(25,211,197,.15),transparent 28%),var(--flaeche)}.gastro-beispiel-bild{position:relative;overflow:hidden;min-height:500px;border-radius:16px;box-shadow:0 26px 65px rgba(36,16,50,.2),17px 17px 0 rgba(25,211,197,.09)}.gastro-beispiel-bild img{position:absolute;width:100%;height:100%;object-fit:cover}.gastro-beispiel-text h2{margin-bottom:21px;font-size:clamp(31px,3.4vw,46px);line-height:1.08;letter-spacing:-1.6px}.gastro-beispiel-text>p:not(.uebertitel){color:var(--grau);line-height:1.72}.gastro-demo-hinweis{margin:24px 0;padding:20px 22px;background:#fff;border:1px solid rgba(113,56,208,.16);border-left:5px solid var(--koralle);box-shadow:0 12px 34px rgba(36,16,50,.065)}.gastro-demo-hinweis strong{display:block;margin-bottom:7px;color:var(--weinrot);font-size:14px}.gastro-demo-hinweis p{margin:0;color:var(--grau);font-size:12px;line-height:1.65}.gastro-beispiel-aktionen{display:flex;align-items:center;gap:21px;flex-wrap:wrap}.gastro-dunkler-link{padding-bottom:4px;color:var(--weinrot);border-bottom:1px solid rgba(113,56,208,.38);font-size:12px;font-weight:800}

.gastro-preis-und-suche{display:grid;grid-template-columns:1fr 1fr;gap:clamp(55px,8vw,105px);align-items:center;background:#fff}.gastro-hervorgehoben.hell{padding:14px 17px;color:var(--schrift)!important;background:linear-gradient(90deg,rgba(113,56,208,.08),rgba(25,211,197,.08));border-left:4px solid var(--tuerkis);font-weight:800}.gastro-suchbox{padding:30px;background:linear-gradient(145deg,#25112f,#5b31a9);color:#fff;border-radius:16px;box-shadow:0 24px 60px rgba(36,16,50,.19)}.gastro-suchbox>span{color:#8ff6ed;font-size:10px;font-weight:900;letter-spacing:1.6px}.gastro-suchbox h3{margin:20px 0 13px;font:700 25px/1.3 Georgia,serif}.gastro-suchbox p{color:rgba(255,255,255,.82);font-size:14px;line-height:1.7}.gastro-suchbox small{display:block;padding-top:15px;color:rgba(255,255,255,.66);border-top:1px solid rgba(255,255,255,.15);font-size:10px;line-height:1.55}

.gastro-uebergabe{padding:75px max(5vw,calc((100vw - 1180px)/2));background:radial-gradient(circle at 90% 15%,rgba(25,211,197,.16),transparent 28%),var(--flaeche)}.gastro-uebergabe-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.gastro-uebergabe-raster article{padding:27px;background:#fff;border:1px solid var(--linie);border-radius:11px}.gastro-uebergabe-raster b{font-size:18px}.gastro-uebergabe-raster p{margin:11px 0 0;color:var(--grau);font-size:13px;line-height:1.65}.gastro-anstossen{margin:20px 0 25px!important;color:#fff!important;font:700 18px/1.55 Georgia,serif}.gastro-abschluss .abschluss-inhalt{max-width:850px}

@media(max-width:900px){
 .gastro-hero,.gastro-kein-baukasten,.gastro-adminbereich,.gastro-reservierung,.gastro-beispiel,.gastro-preis-und-suche{grid-template-columns:1fr}
 .gastro-preisbox{max-width:470px}.gastro-ideenraster{grid-template-columns:1fr 1fr}.gastro-admin-demo{max-width:620px}.gastro-beispiel-bild{min-height:420px;max-width:680px}.gastro-uebergabe-raster{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
 .gastro-hero{min-height:auto;padding:58px 20px;gap:38px}.gastro-hero h1{font-size:clamp(38px,12vw,50px);letter-spacing:-2px}.gastro-einleitung{font-size:16px}.gastro-hero-aktionen{align-items:flex-start;flex-direction:column}.gastro-preisbox{padding:25px}
 .gastro-kein-baukasten{padding-top:58px;padding-bottom:58px}.gastro-zitat{padding:26px;transform:none}.gastro-ideenraster{grid-template-columns:1fr}.gastro-ideenkarte{min-height:auto}.gastro-adminbereich{padding:60px 20px}.gastro-admin-demo{padding:21px;transform:none}.gastro-reservierung-liste{padding:24px}.gastro-beispiel{padding:60px 20px}.gastro-beispiel-bild{min-height:310px}.gastro-beispiel-aktionen{align-items:flex-start;flex-direction:column}.gastro-preis-und-suche{padding-top:58px;padding-bottom:58px}.gastro-uebergabe{padding:58px 20px}.gastro-uebergabe-raster{grid-template-columns:1fr}.gastro-kein-baukasten-text h2,.gastro-reservierung h2,.gastro-preis-und-suche h2,.gastro-admin-text h2,.gastro-beispiel-text h2{font-size:32px}.gastro-anstossen{font-size:17px}
}

/* =========================================================
   Glamour-Startseite und dunkler gemeinsamer Rahmen
   Autorin: Jacqueline Rohde
   Stand: 21.09.2026
   ========================================================= */
.seitenkopf{color:#fff;background:rgba(24,12,32,.91);border-bottom-color:rgba(255,255,255,.09);box-shadow:0 10px 40px rgba(8,2,13,.25)}
.desktop-navigation a:hover,.desktop-navigation a.aktiv{color:#8ff6ed;border-color:#dc4eb2}.seiten-fuer-auswahl summary::after{color:#8ff6ed}.seiten-fuer-auswahl[open] summary,.seiten-fuer-auswahl.aktiv summary,.seiten-fuer-auswahl summary:hover{color:#8ff6ed;border-color:#dc4eb2}
.seiten-fuer-menue{color:#fff;background:rgba(31,16,42,.98);border-color:rgba(255,255,255,.13);box-shadow:0 20px 55px rgba(7,2,12,.45)}.seiten-fuer-menue a:hover,.seiten-fuer-menue a.aktiv{color:#9ff8ef;background:rgba(255,255,255,.08)}
.glamour-hero{width:100%;max-width:none;margin:0;padding:92px max(5vw,calc((100vw - 1180px)/2)) 96px;color:#fff;background:radial-gradient(circle at 88% 17%,rgba(25,211,197,.23),transparent 23%),radial-gradient(circle at 67% 105%,rgba(255,107,87,.22),transparent 31%),radial-gradient(circle at 13% 12%,rgba(220,78,178,.18),transparent 27%),linear-gradient(125deg,#120817 0%,#291036 43%,#52205f 72%,#171120 100%)}
.glamour-hero:before{top:-130px;right:-80px;width:600px;height:600px;background:radial-gradient(circle,rgba(25,211,197,.24),rgba(113,56,208,.11) 42%,transparent 70%);filter:blur(16px)}.glamour-hero:after{left:7%;bottom:-150px;width:540px;height:310px;background:radial-gradient(ellipse,rgba(220,78,178,.3),rgba(255,107,87,.11) 40%,transparent 70%)}
.marken-zeile{margin:0 0 8px;color:#fff;font-size:13px;font-weight:900;letter-spacing:2.3px;text-transform:uppercase}.marken-zeile span{padding:0 5px;color:#8ff6ed}.seit-zeile{margin:0 0 32px;color:#ffc1df;font:italic 18px/1.4 Georgia,serif;letter-spacing:.3px}
.glamour-hero .start-text h1{max-width:760px;margin-bottom:25px;color:#fff;font-size:clamp(48px,5.2vw,72px);line-height:.98;letter-spacing:-3.1px;text-shadow:0 5px 30px rgba(0,0,0,.28)}.glamour-hero .start-text h1 span{display:block;margin-bottom:9px;color:#9ff8ef;text-shadow:0 0 14px rgba(25,211,197,.45),0 0 40px rgba(113,56,208,.35)}.glamour-hero .einleitung{max-width:690px;color:rgba(255,255,255,.81);font-size:18px}.glamour-textlink{padding-bottom:4px;color:#fff;border-bottom:1px solid rgba(255,255,255,.48);font-size:13px;font-weight:900}.glamour-textlink:hover{color:#9ff8ef;border-color:#9ff8ef}
.glamour-visual{background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.055));border-color:rgba(255,255,255,.22);box-shadow:0 34px 90px rgba(5,1,10,.46),18px 18px 0 rgba(25,211,197,.07),0 0 65px rgba(220,78,178,.18);backdrop-filter:blur(18px)}.glamour-visual .visual-browserkopf{background:rgba(8,4,13,.48);border-bottom:1px solid rgba(255,255,255,.11)}.glamour-visual .visual-inhalt{color:#fff}.visual-kicker{display:block;margin-bottom:18px;color:#8ff6ed;font-size:9px;font-weight:900;letter-spacing:2px}.glamour-visual .visual-inhalt>p{font-size:31px}.visual-funktionen{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:30px}.visual-funktionen span{padding:9px 11px;color:#fff;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.13);border-radius:7px;font-size:10px;font-weight:800}.glamour-visual .visual-inhalt strong{border-top-color:rgba(255,255,255,.15)}.glamour-visual .visual-inhalt small{color:rgba(255,255,255,.62)}
.branchenbereich{color:#fff;background:radial-gradient(circle at 92% 4%,rgba(25,211,197,.13),transparent 25%),radial-gradient(circle at 8% 93%,rgba(220,78,178,.15),transparent 28%),linear-gradient(145deg,#160d1d,#24142f)}.branchenbereich .uebertitel{color:#8ff6ed}.branchenbereich .bereich-kopf>p{color:rgba(255,255,255,.64)}.branchenbereich .branchenkarte{border:1px solid rgba(255,255,255,.11);box-shadow:0 22px 55px rgba(4,1,8,.28)}.branchenbereich .branchenkarte:hover{box-shadow:0 30px 70px rgba(4,1,8,.42),0 0 42px rgba(220,78,178,.1)}.branchen-hinweis{color:rgba(255,255,255,.76);background:rgba(255,255,255,.07);border-left-color:#8ff6ed}
.ueber-mich-kompakt{color:#fff;background:radial-gradient(circle at 14% 20%,rgba(25,211,197,.16),transparent 25%),radial-gradient(circle at 88% 80%,rgba(220,78,178,.2),transparent 28%),linear-gradient(125deg,#1b1024,#371746)}.ueber-mich-kompakt .uebertitel{color:#8ff6ed}.ueber-mich-kompakt .ueber-mich-text h2{color:#fff}.ueber-mich-kompakt .ueber-mich-text p:not(.uebertitel){color:rgba(255,255,255,.75)}.ueber-mich-kompakt .foto-rahmen{border:1px solid rgba(255,255,255,.16);box-shadow:18px 18px 0 rgba(25,211,197,.08),0 28px 70px rgba(4,1,8,.43),0 0 55px rgba(220,78,178,.18)}.individuell-hinweis{color:#fff!important;font-weight:800}.ueber-mich-kompakt .keine-pauschale{color:rgba(255,255,255,.78)!important;background:linear-gradient(90deg,rgba(25,211,197,.12),rgba(220,78,178,.11));border-left-color:#8ff6ed}.ueber-mich-kompakt .keine-pauschale strong{color:#fff}
.abschluss{padding-top:65px;padding-bottom:67px}.abschluss h2{font-size:clamp(38px,4vw,56px)}.fussbereich{color:#fff;background:#110817;border-top:1px solid rgba(255,255,255,.08)}.fuss-inhalt p{color:rgba(255,255,255,.57)}.fuss-link{color:#9ff8ef}
@media(max-width:850px){.handy-navigation{color:#fff}.handy-navigation[open] .handy-menue{color:#fff;background:#21132b;border-color:rgba(255,255,255,.13)}.handy-menue a:hover,.handy-menue a:focus,.handy-menue a.aktiv{color:#9ff8ef;background:rgba(255,255,255,.08)}.handy-menue-titel{color:rgba(255,255,255,.55);border-top-color:rgba(255,255,255,.13)}}
@media(max-width:600px){.glamour-hero{padding:60px 20px 64px}.marken-zeile{font-size:11px;letter-spacing:1.7px}.seit-zeile{margin-bottom:25px;font-size:16px}.glamour-hero .start-text h1{font-size:clamp(40px,12.6vw,53px);line-height:1.01;letter-spacing:-2.2px}.glamour-hero .einleitung{font-size:16px}.glamour-visual .visual-inhalt>p{font-size:25px}.branchenbereich{padding-top:62px;padding-bottom:62px}.ueber-mich-kompakt{padding-top:62px;padding-bottom:62px}}

/* Eigenständige Tierschutzkarte auf der Startseite */
.branche-tierschutz{grid-column:1/-1;min-height:285px;padding-right:min(42%,480px);background:radial-gradient(circle at 86% 50%,rgba(255,255,255,.13),transparent 18%),linear-gradient(120deg,#17392d,#376b50 58%,#9a7840)}.branche-tierschutz .branchen-symbol{margin-bottom:28px;color:#ffe0a3}.branche-tierschutz .branchen-preis{display:block;margin:8px 0 38px;color:#ffe0a3;font:700 17px Georgia,serif}

/* KoBuero-Herzenspaket Tierschutz */
.tierschutz-hero{min-height:660px;padding:82px max(5vw,calc((100vw - 1180px)/2));display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.7fr);gap:clamp(55px,8vw,110px);align-items:center;color:#fff;background:radial-gradient(circle at 86% 15%,rgba(197,154,82,.28),transparent 25%),radial-gradient(circle at 8% 90%,rgba(157,185,161,.2),transparent 28%),linear-gradient(130deg,#13271f,#315846 55%,#1d3d30)}.tierschutz-hero .uebertitel{color:#efd194}.tierschutz-hero h1{margin-bottom:25px;font-size:clamp(44px,5.2vw,70px);line-height:1.01;letter-spacing:-3px}.tierschutz-hero h1 span{color:#efd194;text-shadow:0 0 25px rgba(197,154,82,.28)}.tierschutz-einleitung{max-width:690px;color:rgba(255,255,255,.86);font-size:17px;line-height:1.72}.tierschutz-persoenlich{max-width:650px;margin:17px 0 31px;color:#dce9dc;font-size:15px;font-weight:700;line-height:1.65}.tierschutz-aktionen{display:flex;align-items:center;gap:24px;flex-wrap:wrap}.tierschutz-textlink{padding-bottom:4px;border-bottom:1px solid rgba(255,255,255,.45);font-size:13px;font-weight:800}
.tierschutz-preisbox{padding:34px;color:var(--schrift);background:linear-gradient(145deg,#fffdf8,#e8f0e8);border:1px solid rgba(255,255,255,.65);border-radius:19px;box-shadow:0 30px 75px rgba(7,18,13,.42),0 0 55px rgba(197,154,82,.13)}.tierschutz-preisbox>span{display:block;color:#315846;font-size:10px;font-weight:900;letter-spacing:1.7px}.tierschutz-preisbox>strong{display:inline-block;margin-top:8px;font-size:61px;line-height:1}.tierschutz-preisbox>small{margin-left:6px;color:var(--grau)}.tierschutz-preisbox>b{display:block;margin-top:8px;font-size:18px}.tierschutz-preisbox hr{margin:24px 0 18px;border:0;border-top:1px solid var(--linie)}.tierschutz-preisbox p{margin:9px 0;color:var(--grau);font-size:13px}.tierschutz-preisbox em{display:block;margin-top:20px;padding:13px 15px;color:#315846;background:#dfece1;border-left:3px solid #c59a52;font-size:12px;font-style:normal;font-weight:800;line-height:1.5}
.tierschutz-zielgruppe{background:#f5f0e4}.tierschutz-zielkarten{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.tierschutz-zielkarten article{padding:27px;background:#fffdf8;border:1px solid #ddd8ca;border-radius:12px}.tierschutz-zielkarten span{color:#b86646;font-size:10px;font-weight:900}.tierschutz-zielkarten h3{margin:27px 0 10px;font-size:20px}.tierschutz-zielkarten p{margin:0;color:var(--grau);font-size:13px;line-height:1.65}
.tierschutz-verwaltung{padding:82px max(5vw,calc((100vw - 1180px)/2));display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(55px,8vw,105px);align-items:center;color:#fff;background:linear-gradient(135deg,#182c23,#315846)}.tierschutz-adminbild{padding:27px;color:var(--schrift);background:#fffdf8;border-radius:16px;box-shadow:0 26px 68px rgba(5,14,9,.4);transform:rotate(-1deg)}.tierschutz-adminbild>span{color:#315846;font-size:10px;font-weight:900;letter-spacing:1.6px}.tierschutz-adminbild h3{margin:8px 0 20px;font:700 24px Georgia,serif}.tierschutz-adminbild p{position:relative;margin:0;padding:15px 0 15px 30px;border-top:1px solid var(--linie)}.tierschutz-adminbild i{position:absolute;left:3px;top:19px;width:12px;height:12px;border-radius:50%;background:#9db9a1}.tierschutz-adminbild b,.tierschutz-adminbild small{display:block}.tierschutz-adminbild small{margin-top:3px;color:var(--grau);font-size:10px}.tierschutz-adminbild a{display:inline-block;margin-top:18px;color:#315846;font-size:11px;font-weight:900}.tierschutz-verwaltung-text .uebertitel{color:#efd194}.tierschutz-verwaltung-text h2,.tierschutz-paket h2,.tierschutz-demo-text h2,.tierschutz-rahmen h2{margin-bottom:22px;font-size:clamp(31px,3.4vw,46px);line-height:1.08;letter-spacing:-1.7px}.tierschutz-verwaltung-text>p:not(.uebertitel){color:rgba(255,255,255,.78);line-height:1.75}.tierschutz-hervorgehoben{padding:14px 0 14px 19px;color:#fff!important;border-left:3px solid #c59a52;font-size:16px;font-weight:800}
.tierschutz-paket{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(55px,8vw,105px);background:#fff}.tierschutz-liste{display:grid;grid-template-columns:1fr 1fr;gap:0 28px}.tierschutz-liste p{position:relative;margin:0;padding:15px 0 15px 27px;border-top:1px solid var(--linie);font-size:13px}.tierschutz-liste p:before{content:'✓';position:absolute;left:2px;color:#315846;font-weight:900}
.tierschutz-demo{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(55px,8vw,105px);align-items:center;background:#f5f0e4}.tierschutz-demo-bild{min-height:430px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 38%,rgba(255,255,255,.72),transparent 34%),linear-gradient(145deg,#cbdcc9,#f4e7cf);border-radius:17px;box-shadow:0 27px 65px rgba(49,72,57,.18),17px 17px 0 rgba(197,154,82,.12)}.tierschutz-demo-bild div{display:flex;gap:5px;font-size:68px}.tierschutz-demo-bild strong{margin-top:30px;color:#263129;font:700 36px Georgia,serif}.tierschutz-demo-bild small{margin-top:8px;color:#69716b;letter-spacing:1.2px}.tierschutz-demo-text>p:not(.uebertitel){color:var(--grau);line-height:1.72}.tierschutz-demo-hinweis{margin:23px 0;padding:19px 21px;background:#fff;border-left:5px solid #c59a52}.tierschutz-demo-hinweis strong{color:#315846}.tierschutz-demo-hinweis p{margin:6px 0 0;color:var(--grau);font-size:12px;line-height:1.65}.tierschutz-demo-aktionen{display:flex;align-items:center;gap:20px;flex-wrap:wrap}.tierschutz-dunkellink{padding-bottom:4px;color:#315846;border-bottom:1px solid rgba(49,88,70,.35);font-size:12px;font-weight:900}
.tierschutz-rahmen{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(55px,8vw,105px);background:#fff}.tierschutz-rahmen>div:last-child{padding-top:30px}.tierschutz-rahmen p{color:var(--grau);line-height:1.75}.tierschutz-abschluss{background:radial-gradient(circle at 85% 18%,rgba(197,154,82,.38),transparent 26%),linear-gradient(125deg,#182c23,#315846 58%,#8a6a38)}.tierschutz-abschluss .uebertitel{color:#f4dca8}
@media(max-width:900px){.tierschutz-hero,.tierschutz-verwaltung,.tierschutz-paket,.tierschutz-demo,.tierschutz-rahmen{grid-template-columns:1fr}.tierschutz-preisbox{max-width:470px}.tierschutz-adminbild{max-width:620px}.tierschutz-demo-bild{max-width:650px}.branche-tierschutz{padding-right:28px}}
@media(max-width:600px){.branche-tierschutz{min-height:340px}.tierschutz-hero{min-height:auto;padding:58px 20px}.tierschutz-hero h1{font-size:clamp(38px,12vw,50px);letter-spacing:-2px}.tierschutz-aktionen{align-items:flex-start;flex-direction:column}.tierschutz-preisbox{padding:25px}.tierschutz-zielkarten,.tierschutz-liste{grid-template-columns:1fr}.tierschutz-verwaltung{padding:60px 20px}.tierschutz-adminbild{transform:none}.tierschutz-demo{padding-top:60px;padding-bottom:60px}.tierschutz-demo-bild{min-height:330px}.tierschutz-demo-bild div{font-size:51px}.tierschutz-demo-bild strong{font-size:29px}.tierschutz-demo-aktionen{align-items:flex-start;flex-direction:column}.tierschutz-verwaltung-text h2,.tierschutz-paket h2,.tierschutz-demo-text h2,.tierschutz-rahmen h2{font-size:32px}}