/* fensterfolierung.berlin – Gestaltung nach mediengestaltung.berlin (Björk-Child, Koji-Look)
   Barlow lokal, hellgrauer Grund, weiße Flächen, Sidebar links mit Logo, Menü und Umschalter. */

@font-face{ font-family:'Barlow'; src:url('/fonts/barlow-latin-regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Barlow'; src:url('/fonts/barlow-latin-medium.woff2')  format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:'Barlow'; src:url('/fonts/barlow-latin-bold.woff2')    format('woff2'); font-weight:700; font-style:normal; font-display:swap; }

:root{
	--text:#232D37;        /* Koji-Text */
	--weiss:#FFFFFF;
	--grau:#68717B;        /* Sekundär */
	--hellgrau:#DCDFE2;
	--kachel:#F2F2F0;
	--seite:#F6F7F8;       /* Seitenhintergrund */
	--folie:#009FE3;       /* Akzent Folie (Logo) */
	--grafik:#E5007D;
	--textil:#FFED00;
	--fehler:#C0264A;
	--ok:#1F7A4D;
	--aussen:clamp(32px, 6.666vw, 64px);
	--klein:16px; --normal:17px; --gross:21px;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
	font-family:'Barlow','Segoe UI',system-ui,-apple-system,sans-serif;
	font-size:var(--normal); font-weight:400; line-height:1.65; letter-spacing:0;
	color:var(--text); background:var(--seite);
	padding:var(--aussen);
}
a{ color:inherit; }
img{ max-width:100%; height:auto; display:block; }
h1,h2,h3{ font-weight:500; letter-spacing:0; line-height:1.25; }
h1{ font-size:clamp(26px,2.4vw,32px); font-style:italic; margin-bottom:.6em; }
h2{ font-size:var(--gross); font-weight:400; margin:1.6em 0 .5em; }
h3{ font-size:var(--normal); margin:1.2em 0 .4em; }
p, ul{ margin-bottom:1em; }
ul{ padding-left:1.2em; }
b, strong{ font-weight:500; }
.grau{ color:var(--grau); }

/* ---------- Raster: Sidebar + Inhalt ---------- */
.layout{ display:grid; grid-template-columns:minmax(0,1fr); gap:0 80px; max-width:1680px; margin:0 auto; }
@media (min-width:782px){ .layout{ grid-template-columns:23% minmax(0,1fr); } }

/* ---------- Sidebar (Desktop) ---------- */
.site-sidebar{ display:none; }
@media (min-width:782px){
	.site-sidebar{
		display:flex; flex-direction:column; justify-content:space-between;
		position:sticky; top:var(--aussen);
		height:calc(100vh - var(--aussen)*2); max-height:calc(100vh - var(--aussen)*2);
		overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin;
		text-align:right;
	}
	.sidebar-oben, .sidebar-unten{ flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; }
	.sidebar-oben{ justify-content:flex-start; gap:2em; }
	/* Mitte wächst: Logo + Profil/Kontakt oben, dann mit Abstand Wolke und Menü, unten bleibt unten */
	.sidebar-mitte{ flex:1 1 auto; display:flex; flex-direction:column; align-items:flex-end; justify-content:flex-start; gap:.5em; padding-top:2.5em; }
	.sidebar-unten{ justify-content:flex-end; gap:.75em; }
}
.logo{ width:100%; }
.logo img{ width:100%; }
.menue{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.25em; font-size:var(--klein); }
.menue a{ text-decoration:none; }
.menue a:hover, .menue a[aria-current]{ text-decoration:underline; }

/* Schlagwort-Buttons (Leistungen) wie die Wolke auf mediengestaltung.berlin */
.wolke-titel{ font-size:var(--klein); font-weight:400; margin:0; }
.wolke{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.5em; list-style:none; padding:0; margin:0; }
.wolke li{ display:inline-block; font-size:var(--klein); font-style:italic; background:var(--weiss); border-radius:3px; padding:.45em .75em; white-space:nowrap; }

/* Umschalter + Rechtliches */
.bereiche{ display:flex; align-items:center; gap:.75em; font-size:var(--klein); color:var(--grau); letter-spacing:.02em; line-height:1.2; }
.bereiche .firma{ color:var(--text); font-weight:500; text-decoration:none; }
.bereiche .nowrap{ white-space:nowrap; }
.bereiche a{ color:var(--grau); text-decoration:none; }
.bereiche a:hover{ color:var(--text); text-decoration:underline; }
.bereiche .aktiv{ color:var(--text); font-weight:700; }
.rechtliches{ display:flex; flex-wrap:wrap; gap:1em; justify-content:flex-end; list-style:none; padding:0; margin:0; font-size:var(--klein); }
.rechtliches a{ color:var(--grau); text-decoration:none; }
.rechtliches a:hover{ text-decoration:underline; }

/* ---------- Mobil: Kopf- und Fußzeile ---------- */
.site-header{ display:flex; align-items:center; justify-content:space-between; gap:2em; padding-bottom:var(--aussen); }
.site-header .logo{ width:200px; }
.site-header .menue{ flex-direction:row; gap:1em; }
.site-footer{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:1em; padding-top:var(--aussen); font-size:var(--klein); }
.site-footer .bereiche{ flex-basis:100%; }
.site-footer .rechtliches{ justify-content:flex-start; }
@media (min-width:782px){ .site-header, .site-footer{ display:none; } }

/* ---------- Inhalt ---------- */
.site-content{ min-width:0; }
.flaeche{ background:var(--weiss); padding:clamp(1.5rem,4vw,4rem); }
.flaeche + .flaeche{ margin-top:2.5em; }
.intro{ color:var(--grau); font-size:var(--gross); line-height:1.5; }

/* Leistungs-Kacheln */
.kacheln{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:1.5em; list-style:none; padding:0; margin:1em 0 0; }
.kacheln li{ background:var(--kachel); border-radius:4px; padding:1.4em 1.6em; font-style:italic; font-size:var(--klein); }

/* ---------- Formular (Logik unverändert) ---------- */
.feld{ margin-bottom:1.25rem; }
label{ display:block; font-size:var(--klein); font-weight:500; margin-bottom:.35rem; }
.optional{ color:var(--grau); font-weight:400; }
input[type=text], input[type=email], input[type=tel], textarea{
	width:100%; font:inherit; color:inherit; padding:.7rem .9rem;
	border:1px solid var(--hellgrau); border-radius:6px; background:var(--weiss);
	transition:border-color .15s ease;
}
input:focus, textarea:focus{ outline:none; border-color:var(--text); }
textarea{ min-height:10em; resize:vertical; }
input[type=file]{ width:100%; font:inherit; font-size:var(--klein); padding:.6rem .5rem; border:1px dashed var(--hellgrau); border-radius:6px; background:var(--seite); cursor:pointer; }
input[type=file]::file-selector-button{ font:inherit; font-size:15px; font-weight:500; color:var(--text); background:var(--weiss); border:1px solid var(--hellgrau); border-radius:4px; padding:.35rem .9rem; margin-right:.85rem; cursor:pointer; }
input[type=file]:hover, input[type=file]:focus-visible{ outline:none; border-color:var(--text); }
.hinweis{ font-size:15px; color:var(--grau); margin-top:.4rem; line-height:1.5; }
.dateiliste{ list-style:none; margin:.6rem 0 0; padding:0; font-size:15px; }
.dateiliste li{ display:flex; justify-content:space-between; gap:1rem; padding:.35rem .6rem; border-radius:4px; background:var(--seite); margin-bottom:.25rem; }
.dateiliste .gross{ color:var(--fehler); font-weight:500; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.zustimmung{ display:flex; gap:.6rem; align-items:flex-start; font-size:var(--klein); margin-bottom:1.75rem; }
.zustimmung input{ margin-top:.35rem; flex-shrink:0; }
.zustimmung label{ margin:0; font-weight:400; line-height:1.5; }
button{ font:inherit; font-size:var(--klein); font-weight:500; color:var(--weiss); background:var(--text); border:0; border-radius:6px; padding:.8rem 1.6rem; cursor:pointer; transition:background .15s ease; }
button:hover{ background:var(--grau); }
button:focus-visible{ outline:2px solid var(--text); outline-offset:3px; }
.meldung{ padding:.8rem 1rem; border-radius:6px; margin-bottom:1.5rem; font-size:var(--klein); }
.meldung.ok{ background:#EBF9F0; color:var(--ok); }
.meldung.fehler{ background:#FFEEEA; color:var(--fehler); }
.meldung ul{ margin:.4rem 0 0 1.1rem; }
.direkt{ margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--hellgrau); font-size:var(--klein); color:var(--grau); }
.direkt a{ color:var(--text); font-weight:500; text-decoration:none; }
.direkt a:hover{ text-decoration:underline; }

/* Rechtstexte */
.anschrift{ line-height:1.6; }
.stand{ color:var(--grau); font-size:var(--klein); margin-top:-.5em; }
.text a{ text-decoration:underline; }
.text a:hover{ text-decoration:none; }