/* tegrafo.berlin – Dachmarke. Gestaltung wie mediengestaltung.berlin: Barlow lokal, hellgrauer Grund, weiße Flächen, graue Kacheln. */
@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; --weiss:#FFFFFF; --grau:#68717B; --hellgrau:#DCDFE2; --kachel:#F2F2F0; --seite:#F6F7F8;
	--textil:#FFED00; --grafik:#E5007D; --folie:#009FE3;
	--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%; }
body{ font-family:'Barlow','Segoe UI',system-ui,-apple-system,sans-serif; font-size:var(--normal); line-height:1.65; color:var(--text); background:var(--seite); padding:var(--aussen); min-height:100vh; display:flex; flex-direction:column; }
a{ color:inherit; }
img{ max-width:100%; height:auto; display:block; }
h1,h2,h3{ font-weight:500; 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; }
p, ul{ margin-bottom:1em; } ul{ padding-left:1.2em; }
b, strong{ font-weight:500; }

.seite{ width:100%; max-width:1200px; margin:0 auto; flex:1; display:flex; flex-direction:column; gap:2.5em; }
.flaeche{ background:var(--weiss); padding:clamp(1.5rem,4vw,4rem); }

/* Kopf: Wortmarke + Claim */
.kopf{ display:flex; align-items:baseline; gap:.75em 1.25em; flex-wrap:wrap; }
.marke{ font-size:clamp(28px,3.5vw,40px); font-weight:700; letter-spacing:0; text-decoration:none; }
.marke .punkt{ color:var(--grafik); }
.claim{ color:var(--grau); font-size:var(--gross); }
.claim .textil{ background:var(--textil); color:var(--text); padding:0 .3em; border-radius:3px; font-weight:500; }
.claim .grafik{ color:var(--grafik); font-weight:500; }
.claim .folie{ color:var(--folie); font-weight:500; }

/* Die drei Bereiche als Kacheln */
.bereiche{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:2.5em; list-style:none; padding:0; margin:2em 0 0; }
.bereiche a{ display:block; background:var(--kachel); border-radius:4px; padding:clamp(1.25rem,3vw,2.25rem); text-decoration:none; transition:background .15s ease; }
.bereiche a:hover{ background:var(--hellgrau); }
.bereiche img{ width:100%; height:auto; aspect-ratio:16/8; object-fit:contain; object-position:left center; }
.bereiche .name{ display:block; margin-top:1.1em; font-size:var(--klein); font-style:italic; color:var(--grau); }

/* Kontakt */
.kontakt a{ font-weight:500; text-decoration:none; }
.kontakt a:hover{ text-decoration:underline; }

/* Fußzeile */
.site-footer{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:1em 2em; padding-top:var(--aussen); font-size:var(--klein); color:var(--grau); line-height:1.5; }
.site-footer nav{ display:flex; gap:1em; }
.site-footer a{ color:var(--grau); text-decoration:none; }
.site-footer a:hover{ color:var(--text); text-decoration:underline; }

/* Rechtstexte */
.text a{ text-decoration:underline; } .text a:hover{ text-decoration:none; }
.anschrift{ line-height:1.6; }
.stand{ color:var(--grau); font-size:var(--klein); margin-top:-.5em; }
.menue{ list-style:none; padding:0; margin:0 0 1.5em; display:flex; gap:1.25em; font-size:var(--klein); }
.menue a{ text-decoration:none; color:var(--grau); } .menue a:hover{ color:var(--text); text-decoration:underline; }