/* ============================================================
   DASTY STAV — Brand Identity Manual v1.0 (červenec 2026)
   Alle Werte hier stammen aus dem Manual. Wer etwas aendert,
   aendert eine Markenentscheidung, keine Geschmacksfrage.
   ============================================================ */
:root{
  /* Primaerfarben, Manual S. 22 */
  --black:#000000;
  --bronze:#A47948;
  /* Stuetzpalette, Manual S. 23 — Verhaeltnis 55 / 25 / 15 / 5 */
  --graphite:#242424;
  --concrete:#D6D1C8;
  --mist:#EEEAE3;
  --white:#F6F6F6;
  /* Abstufungen, Manual S. 24 */
  --bronze-60:#C3A480;
  --bronze-20:#EDE4DA;
  --black-60:#666666;
  --black-20:#CCCCCC;

  --schrift:"Archivo",Arial,Helvetica,sans-serif;
  --schrift-titel:"Archivo",Arial,Helvetica,sans-serif;

  /* Raster, Manual S. 28: 12 Spalten, Aussenrand 6 %, Abstaende in Vielfachen von 8 */
  --rand:6%;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s6:48px; --s8:64px; --s12:96px; --s16:128px;
  --linie:1px;                 /* Kontrolllinie */
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--schrift);
  font-size:17px; line-height:1.6;
  color:var(--black); background:var(--white);
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Manual S. 29: keine Schatten, keine Verlaeufe, keine Rundungen.
   Schatten und Verlaeufe bleiben global gesperrt. */
*,*::before,*::after{box-shadow:none!important}

/* ABWEICHUNG vom Manual, ausdruecklich von David gewollt: die Bildecken
   sind rund wie auf der alten Seite (dort gemessen: 25 px). S. 29 sagt
   „bez zaoblení" -- das gilt weiter fuer Logo, Knoepfe, Felder und Ikonen,
   die alle eckig bleiben. Nur Fotos sind rund.
   Zurueckdrehen ist eine Zahl: --radius-bild auf 0.. */
:root{ --radius-bild:25px; }

/* height:auto ist Pflicht, sobald die Bilder width/height als Attribut
   tragen (und das sollen sie, sonst springt das Seitenlayout beim Laden).
   Ohne das gilt die Attributhoehe als CSS-Hoehe, damit sind beide Masse
   gesetzt und aspect-ratio wird stillschweigend ignoriert -- die Portraets
   standen deshalb 1481 px hoch in einer 286 px breiten Spalte. */
img{max-width:100%;display:block;height:auto}
a{color:inherit}

/* ---------- Raster ---------- */
.bahn{padding-left:var(--rand);padding-right:var(--rand)}
.raster{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s4)}
.sdg{grid-column:span 5}    /* 5 Spalten fuer die Botschaft, Manual S. 28 */
.bild{grid-column:span 6}   /* 6 Spalten fuer Bild oder Beweis */
.voll{grid-column:1/-1}

/* ---------- Typografische Hierarchie, Manual S. 27 ---------- */
h1{
  font-family:var(--schrift-titel);
  font-variation-settings:"wdth" 125;
  font-weight:700;
  font-size:clamp(40px,6.2vw,64px);
  line-height:1.02; letter-spacing:.01em; text-transform:uppercase;
}
h2{
  font-weight:700;
  font-size:clamp(28px,3.4vw,36px);
  line-height:1.12; letter-spacing:-.005em;
}
h3{font-weight:700;font-size:20px;line-height:1.25}
.perex{font-weight:700;font-size:clamp(20px,2vw,24px);line-height:1.35;max-width:34ch}
p{max-width:68ch}            /* 45-75 Zeichen je Zeile, Manual S. 27 */

/* Augenbraue: kurze Verortung ueber der Ueberschrift.
   Auf hellem Grund steht sie in Graphit, NICHT in Bronze: Bronze auf Concrete
   kommt auf 2,4:1, auf Weiss auf 3,3:1 -- beides faellt bei Kleintext durch.
   Genau davor warnt Manual S. 23. Bronze bleibt hier der Strich davor. */
.braue{
  font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--graphite);display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s3);
}
.braue::before{content:"";width:40px;height:2px;background:var(--bronze);flex:0 0 auto}

/* Kontrolllinie, Manual S. 29: duenne Bronzelinie trennt Schichten */
.kontrolllinie{height:2px;background:var(--bronze);border:0;width:96px;margin:var(--s4) 0}

/* ---------- Flaechen ---------- */
/* Festes Feld, Manual S. 29: schwarze oder mineralische Flaeche traegt Inhalt */
.dunkel{background:var(--graphite);color:var(--white)}
.schwarz{background:var(--black);color:var(--white)}
.mineral{background:var(--mist);color:var(--black)}
.beton{background:var(--concrete);color:var(--black)}
.dunkel p,.schwarz p{color:var(--black-20)}
/* Auf dunklem Grund darf die Augenbraue bronzen sein: #C3A480 auf Graphit
   sind 6,4:1. Das Kopfbild muss hier mitgenannt werden -- es traegt keine
   der beiden Flaechenklassen, sondern setzt sein Schwarz selbst. */
.dunkel .braue,.schwarz .braue,.hero .braue{color:var(--bronze-60)}
.dunkel .braue::before,.schwarz .braue::before,.hero .braue::before{background:var(--bronze)}

section{padding:var(--s16) 0}
@media (max-width:900px){section{padding:var(--s12) 0}}

/* ---------- Schnitt 35°, Manual S. 29 ---------- */
/* Der schraege Schnitt kommt aus dem Bronzepfeiler im Symbol. skewX(-35deg)
   kippt die senkrechte Kante um genau 35 Grad.
   Bewusst OHNE Bronze: Manual S. 23 sagt, Bronz ist Akzent, keine Flaechen-
   dekoration. Der Schnitt teilt die Flaeche, die Bronzelinie am Bild setzt
   den Akzent. Ein bronzener Keil quer durch die Ueberschrift waere beides
   zugleich -- und damit keines von beiden. */
.schnitt{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.schnitt::before{
  content:"";position:absolute;top:-10%;bottom:-10%;left:46%;right:-30%;
  background:#151515;transform:skewX(-35deg);
}
.dunkel .schnitt::before,.aufruf .schnitt::before{background:#1C1C1C}
@media (max-width:900px){.schnitt{display:none}}

/* ---------- Kopf ---------- */
header{
  position:sticky;top:0;z-index:50;
  background:var(--black);color:var(--white);
  border-bottom:var(--linie) solid rgba(164,121,72,.45);
}
.kopf{display:flex;align-items:center;gap:var(--s4);padding-top:var(--s2);padding-bottom:var(--s2)}
/* Manual S. 21: Logo in Kopfposition immer oben links.
   Manual S. 18: horizontal mindestens 180 px -- gehalten.
   OFFEN: derselbe Punkt verlangt unter 360 px das Lockup OHNE Claim. Diese
   Fassung liegt im Manual nicht bei; die gelieferte PNG hat den Claim fest
   eingebaut und laesst sich nicht sauber beschneiden, weil das Symbol tiefer
   reicht als die Claimzeile. Bis die claimlose SVG von KLIMSZ da ist, steht
   hier das volle Lockup auf 240 px.. */
.kopf .marke img{width:240px;height:auto}
.kopf nav{margin-left:auto;display:flex;gap:var(--s3);align-items:center}
.kopf nav a{
  text-decoration:none;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  padding:6px 0;border-bottom:2px solid transparent;
}
.kopf nav a:hover,.kopf nav a:focus-visible{border-bottom-color:var(--bronze)}

.sprachen{display:flex;gap:var(--s1);margin-left:var(--s3)}
.sprachen button{
  font:inherit;font-size:12px;font-weight:700;letter-spacing:.1em;
  background:none;border:1px solid rgba(255,255,255,.28);color:var(--white);
  padding:5px 9px;cursor:pointer;
}
.sprachen button:hover{border-color:var(--bronze)}
.sprachen button[aria-pressed=true]{background:var(--bronze);border-color:var(--bronze);color:var(--black)}

.knopf-menue{display:none;background:none;border:1px solid rgba(255,255,255,.28);color:var(--white);padding:8px 10px;cursor:pointer;margin-left:auto}

@media (max-width:1180px){
  .knopf-menue{display:block}
  .kopf nav{
    margin-left:0;position:absolute;top:100%;left:0;right:0;
    background:var(--black);border-bottom:var(--linie) solid var(--bronze);
    flex-direction:column;align-items:flex-start;gap:0;padding:var(--s2) var(--rand);
    display:none;
  }
  .kopf nav[data-offen=ja]{display:flex}
  .kopf nav a{padding:12px 0;width:100%;border-bottom:1px solid rgba(255,255,255,.1)}
  .sprachen{margin:var(--s2) 0 0}
}
/* Auf dem Telefon nimmt das Lockup bei 240 px zwei Drittel der Breite ein.
   180 px ist die im Manual (S. 18) genannte Untergrenze fuer die horizontale
   Fassung -- genau darauf, nicht darunter. */
@media (max-width:480px){.kopf .marke img{width:180px}}

/* ---------- Knoepfe ---------- */
.knopf{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;padding:15px 26px;border:2px solid var(--bronze);
  background:var(--bronze);color:var(--black);cursor:pointer;
  transition:background .12s,color .12s;
}
.knopf:hover{background:transparent;color:var(--bronze)}
.knopf.leer{background:transparent;color:inherit;border-color:currentColor}
.knopf.leer:hover{background:var(--bronze);border-color:var(--bronze);color:var(--black)}
.knopf svg{width:18px;height:18px;flex:0 0 auto}

/* ---------- Kopfbild ---------- */
/* Nur oben und unten setzen: .bahn haelt den Aussenrand von 6 %. Eine
   padding-Kurzform hier wuerde ihn ueberschreiben und der Text klebte
   am linken Rand. */
.hero{position:relative;background:var(--black);color:var(--white);overflow:hidden;
  padding-top:var(--s16);padding-bottom:var(--s12)}
.hero .raster{position:relative;z-index:2;align-items:center}
.hero h1{margin-bottom:var(--s3)}
.hero .perex{color:var(--white);margin-bottom:var(--s3)}
.hero p{margin-bottom:var(--s6)}
.hero .taten{display:flex;gap:var(--s2);flex-wrap:wrap}
.hero-bild{grid-column:span 6;position:relative}
.hero-bild img{width:100%;height:clamp(320px,46vh,520px);object-fit:cover;filter:grayscale(.25) contrast(1.05);
  border-radius:var(--radius-bild)}
/* Bronzelinie als Rahmenkante -- Manual S. 21: Betonung des Bildes durch eine Linie */
.hero-bild::before{content:"";position:absolute;left:-16px;top:0;bottom:0;width:2px;background:var(--bronze)}
@media (max-width:900px){
  .hero{padding-top:var(--s8);padding-bottom:var(--s8)}
  .hero .sdg,.hero-bild{grid-column:1/-1}
  .hero-bild::before{display:none}
}

/* ---------- Drei Saeulen ---------- */
.saeulen{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6);margin-top:var(--s8)}
.saeule{border-top:2px solid var(--bronze);padding-top:var(--s3)}
.saeule h3{letter-spacing:.14em;text-transform:uppercase;font-size:15px;margin-bottom:var(--s2)}
@media (max-width:900px){.saeulen{grid-template-columns:1fr;gap:var(--s4)}}

/* ---------- Leistungen ---------- */
.leistungen{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--linie);background:rgba(255,255,255,.14);margin-top:var(--s8);border:var(--linie) solid rgba(255,255,255,.14)}
.leistung{background:var(--graphite);padding:var(--s6);display:flex;flex-direction:column;gap:var(--s2)}
.leistung .nr{font-size:13px;font-weight:700;letter-spacing:.2em;color:var(--bronze)}
.leistung h3{text-transform:uppercase;letter-spacing:.06em;font-size:19px}
.leistung svg{width:24px;height:24px;stroke:var(--white);stroke-width:2;fill:none;stroke-linecap:butt;stroke-linejoin:miter;margin-bottom:var(--s2)}
.leistung:hover{background:#2C2C2C}
.leistung:hover svg{stroke:var(--bronze)}
@media (max-width:760px){.leistungen{grid-template-columns:1fr}}

/* ---------- Publikum ---------- */
.publikum{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6);margin-top:var(--s8)}
.hoerer{border-left:2px solid var(--bronze);padding-left:var(--s3)}
.hoerer .wer{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--black-60);margin-bottom:var(--s2)}
.hoerer .was{font-size:26px;font-weight:700;text-transform:uppercase;letter-spacing:-.01em;margin-top:var(--s2)}
@media (max-width:900px){.publikum{grid-template-columns:1fr;gap:var(--s4)}}

/* ---------- Beweis / Postup ---------- */
.schritte{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:var(--s8);border-top:2px solid var(--bronze)}
.schritt{padding:var(--s4) var(--s3) 0 0;border-right:var(--linie) solid rgba(255,255,255,.16)}
.schritt:last-child{border-right:0}
.schritt .nr{font-size:34px;font-weight:800;color:var(--bronze);line-height:1;margin-bottom:var(--s2);font-variation-settings:"wdth" 110}
.schritt h3{font-size:17px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--s1)}
.schritt p{font-size:15px}
@media (max-width:900px){.schritte{grid-template-columns:1fr}.schritt{border-right:0;border-bottom:var(--linie) solid rgba(255,255,255,.16);padding-bottom:var(--s3)}}

/* ---------- Realisierungen ---------- */
.werke{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin-top:var(--s8)}
/* Die Rundung sitzt auf der ganzen Kachel, nicht nur auf dem Bild: sonst
   traefen runde Bildecken auf ein eckiges Schild darunter. overflow:hidden
   beschneidet Bild und Schild gemeinsam. */
.werk{display:block;text-decoration:none;color:var(--white);background:var(--black);
  border-radius:var(--radius-bild);overflow:hidden}
.werk .rahmen{display:block;overflow:hidden}
.werk img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:grayscale(.3) contrast(1.05);transition:filter .2s,transform .3s}
.werk:hover img{filter:grayscale(0) contrast(1.05);transform:scale(1.03)}
/* Pevné pole statt Verlauf. Manual S. 29 verbietet Verlaeufe ausdruecklich,
   und S. 19 sagt fuer unsicheren Kontrast: durchgehendes schwarzes Feld
   unterlegen. Auf dem hellen Kuechenbild war die bronzene Kennung ueber
   einem Verlauf schlicht nicht zu lesen. */
.werk .schild{display:block;padding:var(--s3);background:var(--black);
  border-top:2px solid rgba(255,255,255,.16);transition:border-color .12s}
/* Manual S. 30: Bronze markiert den aktiven Zustand. Sechs Bronzelinien
   nebeneinander waeren wieder Dekoration -- die Linie wird bronzen, wenn
   die Kachel angefasst wird. */
.werk:hover .schild,.werk:focus-visible .schild{border-top-color:var(--bronze)}
/* Art und Name stehen untereinander -- als span braucht das ausdruecklich
   display:block, sonst laufen Kennung und Name in eine Zeile. */
.werk .art{display:block;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze);margin-bottom:6px}
.werk .name{display:block;font-size:18px;font-weight:700;line-height:1.2}
@media (max-width:980px){.werke{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.werke{grid-template-columns:1fr}}

/* ---------- Ueber uns ---------- */
/* Feste Bildhoehe statt height:100%. Mit 100 % waechst das Bild auf die volle
   Spaltenhoehe und schiebt die Zahlen darunter aus dem Blickfeld. */
.ueber-bild{width:100%;aspect-ratio:4/3;object-fit:cover;filter:grayscale(.25) contrast(1.05);
  border-radius:var(--radius-bild)}
.werte{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}
.wert{border:1px solid var(--black);padding:8px 16px;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.zahlen{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s6);margin-top:var(--s6)}
.zahl b{display:block;font-size:44px;font-weight:800;line-height:1;font-variation-settings:"wdth" 115}
.zahl span{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--black-60)}

/* ---------- Freie Stellen ---------- */
/* Eine Liste, keine Kacheln. Fuenf Stellen mit je einem Satz sind eine
   Aufzaehlung -- Karten wuerden Gewicht vortaeuschen, das der Inhalt nicht
   hat. Bronze nur als Kontrolllinie oben und im angefassten Zustand
   (Manual S. 30), nicht als Text: auf Concrete kaeme Bronze auf 2,4:1. */
.pozice{margin-top:var(--s8);border-top:2px solid var(--bronze)}
.pozice a{
  display:grid;grid-template-columns:3.5em 1fr auto;gap:var(--s3);
  padding:var(--s3) 0;border-bottom:var(--linie) solid rgba(0,0,0,.22);
  text-decoration:none;transition:padding-left .12s;
}
.pozice a:hover,.pozice a:focus-visible{padding-left:var(--s2);border-bottom-color:var(--bronze)}
.pozice .nr{font-size:12px;font-weight:700;letter-spacing:.2em;color:var(--black-60);padding-top:5px}
.pozice h3{font-size:21px;text-transform:uppercase;letter-spacing:.02em}
.pozice p{font-size:15px;margin-top:6px;max-width:64ch}
.pozice .pfeil{align-self:center;width:22px;height:22px;stroke:currentColor;stroke-width:2;fill:none;flex:0 0 auto}
.pozice a:hover .pfeil{stroke:var(--bronze)}
@media (max-width:620px){
  .pozice a{grid-template-columns:1fr auto}
  .pozice .nr{grid-column:1/-1;padding-top:0}
}

/* ---------- Ansprechpartner ---------- */
/* Gedeckelt auf 620 px: ueber die volle Breite waeren zwei Portraets je
   610 px gross und wuerden den Abschnitt beherrschen. Der Beweis der Seite
   sind die Bauten, nicht die Gesichter. */
.tym{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s6);
  margin-top:var(--s8);max-width:620px}
.person .portret{
  width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center 15%;
  background:var(--mist);border-radius:var(--radius-bild);margin-bottom:var(--s3);
}
.person .rolle{display:block;font-size:11px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--bronze-60);margin-bottom:6px}
.person .name{display:block;font-size:21px;font-weight:700;line-height:1.2}
.person .wege{margin-top:var(--s2);font-size:15px;display:grid;gap:6px}
.person .wege a{text-decoration:none;width:fit-content}
.person .wege a:hover{color:var(--bronze)}
@media (max-width:620px){.tym{grid-template-columns:1fr;gap:var(--s6)}}

/* ---------- Karte ---------- */
/* Erst auf Klick laden. Ein Google-Maps-iframe setzt Cookies, sobald die
   Seite geladen ist -- ohne Einwilligung ist das in der EU nicht zulaessig,
   und euer Cookie-Banner haette es sonst zu verantworten. Bis zum Klick
   steht hier ein festes schwarzes Feld (Manual S. 29) mit der Anschrift. */
.karte{margin-top:var(--s8);border-radius:var(--radius-bild);overflow:hidden;
  border-top:2px solid var(--bronze);position:relative;background:var(--black)}
.karte iframe{display:block;width:100%;height:420px;border:0}
@media (max-width:620px){.karte iframe{height:320px}}

/* ---------- Aufruf ---------- */
.aufruf{position:relative;overflow:hidden}
/* Alles im Aufruf muss ueber den Keil. Vorher stand nur das erste Raster
   auf z-index 2 -- Team und Karte lagen darunter und der Keil schnitt
   quer durch Anetas Portraet. */
.aufruf .raster,.aufruf .tym,.aufruf .karte{position:relative;z-index:2}
.aufruf .raster{align-items:end}
.aufruf h2{max-width:18ch}
.kontaktliste{list-style:none;display:grid;gap:var(--s3)}
.kontaktliste li{border-top:var(--linie) solid rgba(255,255,255,.22);padding-top:var(--s2)}
.kontaktliste .kennung{display:block;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze-60);margin-bottom:4px}
.kontaktliste a{text-decoration:none;font-size:19px;font-weight:700}
.kontaktliste a:hover{color:var(--bronze)}

/* ---------- Fuss ---------- */
footer{background:var(--black);color:var(--black-20);padding:var(--s12) 0 var(--s6);font-size:14px}
footer a{text-decoration:none}
footer a:hover{color:var(--bronze)}
.fuss{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:var(--s6)}
.fuss h4{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--white);margin-bottom:var(--s3)}
.fuss ul{list-style:none;display:grid;gap:10px}
.fuss .marke img{width:260px;margin-bottom:var(--s3)}
.fuss .claim{font-size:12px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--bronze)}
.fussrand{display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:space-between;
  border-top:var(--linie) solid rgba(255,255,255,.16);margin-top:var(--s8);padding-top:var(--s3);font-size:12.5px;color:var(--black-60)}
@media (max-width:980px){.fuss{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.fuss{grid-template-columns:1fr}}

/* Sprungmarke fuer die Tastatur */
.sprung{position:absolute;left:-9999px;top:0;background:var(--bronze);color:var(--black);padding:10px 16px;font-weight:700;z-index:100}
.sprung:focus{left:var(--rand)}
:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}

/* ---------- Beiträge (Karussells aus den sozialen Netzen) ---------- */
/* Manual S. 33: ein Beitrag hat eine Aussage; im Karussell haelt das erste
   Blatt das Versprechen, die weiteren beweisen den Ablauf. Genau so laufen
   die Kacheln: Deckblatt in der Uebersicht, der Rest im Leuchtkasten. */
.prispevky{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);margin-top:var(--s8)}
@media (max-width:980px){.prispevky{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.prispevky{grid-template-columns:1fr}}

.prispevek{
  display:block;width:100%;text-align:left;cursor:pointer;text-decoration:none;
  background:var(--black);color:var(--white);border:0;padding:0;font:inherit;
  border-radius:var(--radius-bild);overflow:hidden;
}
.prispevek img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .3s}
.prispevek:hover img{transform:scale(1.03)}
.prispevek .stitek{
  display:block;padding:var(--s3);
  border-top:2px solid rgba(255,255,255,.16);transition:border-color .12s;
}
.prispevek:hover .stitek,.prispevek:focus-visible .stitek{border-top-color:var(--bronze)}
.prispevek .pocet{display:block;font-size:11px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--bronze);margin-bottom:6px}
.prispevek .titul{display:block;font-size:18px;font-weight:700;line-height:1.25}
.prispevek .lead{display:block;margin-top:8px;font-size:14.5px;color:var(--black-20)}

/* ---------- Leuchtkasten ---------- */
/* Festes schwarzes Feld, kein Milchglas: Manual S. 29 laesst weder Verlauf
   noch Weichzeichner zu. Deckend Schwarz ist ausserdem der einzige Grund,
   auf dem die bronzenen Blaetter sicher stehen (S. 19). */
.kasten{position:fixed;inset:0;z-index:100;background:var(--black);
  display:none;flex-direction:column;padding:var(--s3) var(--rand) var(--s4)}
.kasten[data-otevreno=ano]{display:flex}
.kasten .lista{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  padding-bottom:var(--s2);border-bottom:2px solid var(--bronze)}
.kasten .lista .titul{font-size:19px;font-weight:700;color:var(--white)}
.kasten .lista .citac{font-size:13px;font-weight:700;letter-spacing:.18em;color:var(--bronze);
  font-variant-numeric:tabular-nums}
.kasten .zavrit{margin-left:auto;background:none;border:1px solid rgba(255,255,255,.28);
  color:var(--white);padding:8px 12px;cursor:pointer;font:inherit;font-size:13px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase}
.kasten .zavrit:hover{border-color:var(--bronze);color:var(--bronze)}

.kasten .plocha{flex:1 1 auto;min-height:0;display:flex;align-items:center;
  justify-content:center;gap:var(--s3);padding:var(--s3) 0}
.kasten .plocha img{max-height:100%;max-width:100%;width:auto;object-fit:contain;
  border-radius:var(--radius-bild)}
.kasten .krok{
  flex:0 0 auto;width:52px;height:52px;display:grid;place-items:center;
  background:none;border:1px solid rgba(255,255,255,.28);color:var(--white);cursor:pointer;
}
.kasten .krok:hover:not(:disabled){border-color:var(--bronze);color:var(--bronze)}
.kasten .krok:disabled{opacity:.25;cursor:default}
.kasten .krok svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2}

/* Blattanzeiger. Bronze markiert nur das aktive Blatt -- Manual S. 30. */
.kasten .body{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.kasten .body button{width:26px;height:4px;background:rgba(255,255,255,.24);border:0;padding:0;cursor:pointer}
.kasten .body button[aria-current=true]{background:var(--bronze)}

@media (max-width:620px){
  .kasten{padding:var(--s2) var(--s2) var(--s3)}
  .kasten .plocha{gap:var(--s1)}
  .kasten .krok{width:40px;height:40px}
}

/* ---------- Umbruch des Rasters ---------- */
/* Auf schmalen Schirmen muessen 5 und 6 Spalten auf die volle Breite. Sonst
   steht die H1 in einer 145 px schmalen Spalte, laeuft ueber ihren Rand und
   liegt im Text daneben. Das galt fuer jeden Abschnitt mit .sdg/.bild --
   bisher war nur das Kopfbild eigens abgefangen. */
@media (max-width:900px){
  .raster{gap:var(--s3)}
  .sdg,.bild{grid-column:1/-1}
}

/* ============================================================
   Bausteine der bisherigen Seite, in die neue Marke uebersetzt.
   Der Aufbau bleibt: quadratischer Punkt vor der Augenbraue,
   zweigewichtige Ueberschrift, Kachel mit rundem Pfeilabzeichen,
   Projektkachel mit dunkler Tafel unten links.
   Geaendert sind Farbe, Schrift, Logo und Text -- sonst nichts.
   ============================================================ */

/* Augenbraue mit quadratischem Punkt statt Strich, wie bisher */
.braue::before{width:10px;height:10px;background:var(--bronze)}

/* Zweigewichtige Ueberschrift: die bisherige Seite setzt einen Teil
   der H2 mager, den anderen fett. Das bleibt. */
.lehky{font-weight:400}

/* Rundes Pfeilabzeichen. Auf der bisherigen Seite blau, jetzt bronzen. */
.odznak{
  flex:0 0 auto;width:52px;height:52px;border-radius:50%!important;
  background:var(--bronze);color:var(--black);
  display:grid;place-items:center;transition:background .12s;
}
.odznak svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2}
a:hover>.odznak,button:hover>.odznak,a:hover .odznak,button:hover .odznak{background:var(--bronze-60)}

/* Knopf mit Abzeichen rechts, wie „Zobrazit všechny projekty" */
.knopf .odznak{width:26px;height:26px;margin-left:4px}
.knopf .odznak svg{width:14px;height:14px}

/* ---------- Abschnitt „Precizní práce" ---------- */
.oduvod{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8);margin-top:var(--s8);align-items:start}
.oduvod img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-bild);filter:grayscale(.2) contrast(1.05)}
.oduvod p+p{margin-top:var(--s3)}
@media (max-width:900px){.oduvod{grid-template-columns:1fr;gap:var(--s4)}}

/* ---------- Projektkacheln ---------- */
/* Bild, darauf unten links eine deckende Tafel mit Titel und Kategorie,
   unten rechts das Pfeilabzeichen. Deckend, nicht mit Verlauf: Manual
   S. 29 laesst keine Verlaeufe zu, S. 19 verlangt bei unsicherem
   Kontrast ein durchgehendes Feld. */
.projekty{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin-top:var(--s8)}
.projekt{position:relative;display:block;text-decoration:none;color:var(--white);
  border-radius:var(--radius-bild);overflow:hidden;background:var(--black)}
.projekt img{width:100%;aspect-ratio:16/11;object-fit:cover;filter:grayscale(.25) contrast(1.05);transition:transform .3s}
.projekt:hover img{transform:scale(1.03)}
.projekt .tabule{
  position:absolute;left:var(--s3);right:var(--s3);bottom:var(--s3);
  display:flex;align-items:center;gap:var(--s3);
  background:var(--black);border-radius:var(--radius-bild);padding:var(--s3);
}
.projekt .tabule .text{min-width:0}
.projekt .nazev{display:block;font-size:19px;font-weight:700;line-height:1.2}
.projekt .druh{display:block;margin-top:5px;font-size:11px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--bronze)}
.projekt .odznak{margin-left:auto}
@media (max-width:760px){.projekty{grid-template-columns:1fr}}

/* ---------- Leistungs- und Stellenkacheln ---------- */
/* Titel oben links, Abzeichen oben rechts, Bild darunter -- der Aufbau
   der bisherigen Seite. Grund ist Mist statt Hellgrau. */
.kachle{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin-top:var(--s8)}
.kachle.dve{grid-template-columns:repeat(2,1fr)}
.kachla{
  display:flex;flex-direction:column;gap:var(--s3);text-decoration:none;
  background:var(--mist);color:var(--black);padding:var(--s4);
  border-radius:var(--radius-bild);transition:background .12s;
}
.kachla:hover{background:var(--concrete)}
.kachla .hlava{display:flex;align-items:flex-start;gap:var(--s3)}
.kachla h3{font-size:21px;line-height:1.2;flex:1 1 auto}
.kachla .hlava .odznak{margin-left:auto}
.kachla p{font-size:15px;color:var(--muted-ink,#4A4A4A)}
.kachla img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-bild);margin-top:auto}
/* Auf dunklem Grund dreht sich die Kachel um */
.dunkel .kachla,.schwarz .kachla{background:#2E2E2E;color:var(--white)}
.dunkel .kachla:hover,.schwarz .kachla:hover{background:#383838}
.dunkel .kachla p,.schwarz .kachla p{color:var(--black-20)}
@media (max-width:980px){.kachle,.kachle.dve{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.kachle,.kachle.dve{grid-template-columns:1fr}}

/* ---------- Newsletter im Fuss ---------- */
.novinky{display:flex;gap:var(--s1);margin-top:var(--s2);max-width:420px}
.novinky input{
  flex:1 1 auto;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.24);
  color:var(--white);padding:12px 14px;border-radius:var(--radius-bild);
}
.novinky input::placeholder{color:#7C7C7C}
.novinky button{
  flex:0 0 auto;background:var(--bronze);color:var(--black);border:0;cursor:pointer;
  font:inherit;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:12px 18px;border-radius:var(--radius-bild);
}
.novinky button:hover{background:var(--bronze-60)}
.novinky-pozn{margin-top:10px;font-size:12px;color:var(--black-60)}

/* Das Abzeichen im Knopf braucht Gegenfarbe: bronzen auf bronzenem Grund
   ist unsichtbar. Im gefuellten Knopf schwarz mit bronzenem Pfeil, im
   leeren Knopf bronzen mit schwarzem Pfeil. */
.knopf .odznak{background:var(--black);color:var(--bronze)}
.knopf:hover .odznak{background:var(--bronze);color:var(--black)}
.knopf.leer .odznak{background:var(--bronze);color:var(--black)}
.knopf.leer:hover .odznak{background:var(--black);color:var(--bronze)}

/* ---------- Selbsttaetiges Blaettern ---------- */
/* Zwei Bilder uebereinander: unten das stehende Blatt, oben das naechste,
   das eingeblendet wird. Die Huelle haelt beide deckungsgleich. */
.listovaci{position:relative;display:block}
.listovaci>img.vrstva{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:0;pointer-events:none;
}
/* In der Projektkachel schneidet die Kachel selbst ab, dort darf die
   Huelle keine eigene Rundung setzen. In der Leistungskachel liegt das
   Bild frei und braucht sie. */
.kachla .listovaci{border-radius:var(--radius-bild);overflow:hidden;margin-top:auto}
.kachla .listovaci>img{margin-top:0}
.prispevek .listovaci{overflow:hidden}

/* Fuenf Ansprechpartner brauchen drei Spalten. */
.tym{grid-template-columns:repeat(3,1fr);max-width:960px}
@media (max-width:900px){.tym{grid-template-columns:repeat(2,1fr);max-width:none}}
@media (max-width:560px){.tym{grid-template-columns:1fr}}

/* Platzhalter, solange ein Portraet fehlt. Bewusst kein graues Rechteck
   und kein fremdes Gesicht: mineralische Flaeche mit dem Symbol, wie es
   Manual S. 15 fuer kleine Anwendungen vorsieht. Man sieht sofort, dass
   hier ein Bild fehlt und keins erfunden wurde. */
.portret.chybi{display:grid;place-items:center;background:var(--mist);
  aspect-ratio:1/1;border-radius:var(--radius-bild);margin-bottom:var(--s3)}
.portret.chybi img{width:38%;height:auto;opacity:.5}

/* Kopfzeile ueber der Karte: Augenbraue, Anschrift, Knopf zur Navigation.
   Die Karte selbst laedt sofort -- ausdruecklich so gewollt. */
.karte-kopf{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s12)}
.karte-kopf .braue{margin-bottom:0}
.karte-adresa{font-size:19px;font-weight:700;color:var(--white);max-width:none;margin-right:auto}
.karte{margin-top:var(--s3)}

/* Quellenangabe unter der Karte. OpenStreetMap verlangt sie
   (ODbL) -- klein, aber vorhanden. */
.karte-zdroj{margin-top:10px;font-size:12px;color:var(--black-60)}
.karte-zdroj a{text-decoration:none}
.karte-zdroj a:hover{color:var(--bronze)}

/* ============================================================
   Unterseiten. Zwei Typen, ein Geruest:
     Kopfband mit Brotkrume und Titel -> Inhalt + Seitenspalte
     -> Aufruf -> Fuss.
   Dieselben Bausteine wie auf der Startseite, nur anders gefuellt.
   ============================================================ */
.zahlavi{background:var(--black);color:var(--white);padding-top:var(--s12);padding-bottom:var(--s12);position:relative;overflow:hidden}
.zahlavi>*{position:relative;z-index:2}
.zahlavi h1{font-size:clamp(30px,4.2vw,50px);max-width:22ch}
.drobky{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--black-60);margin-bottom:var(--s3)}
.drobky a{text-decoration:none}
.drobky a:hover{color:var(--bronze)}

.podstranka{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--s8);align-items:start}
@media (max-width:980px){.podstranka{grid-template-columns:1fr}}

/* Fliesstext der Unterseiten */
.obsah h3{font-size:22px;margin:var(--s6) 0 var(--s2)}
.obsah h3:first-child{margin-top:0}
.obsah p{margin-bottom:var(--s2)}
.obsah ul{list-style:none;display:grid;gap:10px;margin:var(--s2) 0 var(--s4)}
.obsah ul li{position:relative;padding-left:22px;max-width:68ch}
/* Quadratischer Bronzepunkt statt Aufzaehlungszeichen -- derselbe
   Merker wie in der Augenbraue. */
.obsah ul li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;background:var(--bronze)}

/* Seitenspalte: die uebrigen Stellen bzw. die uebrigen Vorhaben */
.bocni{background:var(--mist);padding:var(--s4);border-top:2px solid var(--bronze)}
.dunkel .bocni,.schwarz .bocni{background:#2E2E2E}
.bocni h4{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted-ink,#4A4A4A);margin-bottom:var(--s3)}
.dunkel .bocni h4,.schwarz .bocni h4{color:var(--bronze-60)}
.bocni ul{list-style:none;display:grid;gap:2px}
.bocni ul a{display:block;text-decoration:none;padding:11px 0;font-weight:600;font-size:15.5px;
  border-bottom:1px solid rgba(0,0,0,.1)}
.dunkel .bocni ul a,.schwarz .bocni ul a{border-bottom-color:rgba(255,255,255,.12)}
.bocni ul a:hover{color:var(--bronze)}
.bocni ul a[aria-current=page]{color:var(--bronze)}
.bocni ul li:last-child a{border-bottom:0}

/* Kennzahlenblock „Informace o stavbě" */
.fakta{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4) var(--s6);
  margin:var(--s6) 0;border-top:2px solid var(--bronze);padding-top:var(--s4)}
.fakta div span{display:block;font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--black-60);margin-bottom:6px}
.fakta div b{font-size:17px;font-weight:700}
@media (max-width:760px){.fakta{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.fakta{grid-template-columns:1fr}}

/* Kontaktperson am Ende einer Stellenanzeige */
.osoba{border-top:2px solid var(--bronze);padding-top:var(--s3);margin-top:var(--s6);display:grid;gap:6px}
.osoba .kennung{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--black-60)}
.osoba a{text-decoration:none;font-weight:700}
.osoba a:hover{color:var(--bronze)}

/* Bildstreifen auf der Projektseite */
.galerie{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3);margin:var(--s6) 0}
.galerie img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-bild);
  filter:grayscale(.2) contrast(1.05)}
@media (max-width:620px){.galerie{grid-template-columns:1fr}}

/* ---------- Runde Ecken an den Knoepfen ---------- */
/* Ausdruecklich gewuenscht, wie auf der bisherigen Seite. Bei rund 50 px
   Knopfhoehe ergibt --radius-bild (25 px) genau die Pillenform von dort.
   Steht mit auf der Abweichungsliste in Abschnitt 3a. */
.knopf{border-radius:var(--radius-bild)}
.sprachen button{border-radius:var(--radius-bild)}
.kasten .zavrit{border-radius:var(--radius-bild)}
.kasten .krok{border-radius:50%}

/* ---------- Flaggen im Sprachumschalter ---------- */
/* Die SVG stammen aus DaSty-ERP.html. Kein Schatten als Kante -- der ist
   global gesperrt -- sondern ein halbdurchsichtiger Rahmen, damit die
   weisse Kante der tschechischen Flagge auf Schwarz nicht ausfranst. */
.sprachen button{display:flex;align-items:center;gap:6px}
.sprachen button svg{width:18px;height:12px;display:block;flex:0 0 auto;
  border:.5px solid rgba(255,255,255,.4)}
.sprachen button[aria-pressed=true] svg{border-color:rgba(0,0,0,.45)}
.sprachen button b{font-weight:700}

/* ---------- Beschriftung über dem Blatt ---------- */
/* Reihenfolge jetzt: Titel, Untertitel, Blattzahl, dann das Bild.
   Die Kontrolllinie sitzt entsprechend unten am Schild und trennt
   Text von Bild, nicht mehr Bild von Text. */
.prispevek .stitek{
  border-top:0;
  border-bottom:2px solid rgba(255,255,255,.16);
}
.prispevek:hover .stitek,.prispevek:focus-visible .stitek{border-bottom-color:var(--bronze)}
.prispevek .titul{margin-bottom:0}
.prispevek .lead{margin-top:8px}
.prispevek .pocet{margin:var(--s2) 0 0}

/* Anrisskacheln der Startseite: dieselbe Abfolge */
.kachla .pocet{
  display:block;font-size:11px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--bronze);
}
.kachla p+.pocet{margin-top:var(--s2)}

/* Die dritte Zeile beginnt bei David Stýblo. Zeile zwei traegt nur zwei
   Karten (die Projektleiter); ohne diese Regel rutschte Dvořáková in
   die freie dritte Spalte. */
.tym .person.novy-radek{grid-column-start:1}
@media (max-width:900px){.tym .person.novy-radek{grid-column-start:auto}}

/* ---------- Bildstrecke der Projektseiten ---------- */
/* Raster aus Vorschaubildern, Klick oeffnet den Leuchtkasten. Die
   Gruppen „Před" und „Po" stehen getrennt: nebeneinander gelegt ist der
   Unterschied der Beweis, den S. 10 verlangt. */
/* Die Bahnueberschrift steht ueber .braue nur auf 12px -- sie ist
   eine Braue, keine Ueberschrift. Eine Gruppenueberschrift von 11px
   daneben verschwindet. Sie ist deshalb eine echte Ueberschrift:
   gross, fett, dunkel, mit der Bronzelinie als Trenner. Bei zehn
   Gruppen auf der Smichov-Seite ist das der einzige Halt beim
   Blaettern zwischen 85 Bildern. */
.skupina{margin-top:var(--s12)}
.skupina:first-child{margin-top:0}
.skupina h4{
  font-size:clamp(21px,2.5vw,30px);
  font-weight:800;
  letter-spacing:-.005em;
  line-height:1.15;
  text-transform:uppercase;
  color:var(--black);
  margin-bottom:var(--s3);
  padding-bottom:var(--s2);
  border-bottom:3px solid var(--bronze);
}

.snimky{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2)}
@media (max-width:980px){.snimky{grid-template-columns:repeat(3,1fr)}}
@media (max-width:620px){.snimky{grid-template-columns:repeat(2,1fr)}}

.snimek{
  display:block;padding:0;border:0;background:var(--mist);cursor:pointer;
  border-radius:var(--radius-bild);overflow:hidden;
}
.snimek img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .3s,filter .2s;
  filter:grayscale(.15) contrast(1.03)}
.snimek:hover img,.snimek:focus-visible img{transform:scale(1.04);filter:none}

/* Der Leuchtkasten der Projektseiten teilt sich die Gestaltung mit dem
   der Beitraege; hier zeigt er ein einzelnes Bild statt eines Blatts. */
.kasten .plocha img{max-height:100%;max-width:100%;width:auto;object-fit:contain}

/* ---------- Film auf der Projektseite ---------- */
/* Steht ueber der Fotostrecke: erst das Ganze, dann das Einzelne.
   Die Breite ist begrenzt -- ein Hochkantfilm aus dem Telefon
   wuerde sonst die halbe Seite hoch werden. */
.film{margin-bottom:var(--s8);max-width:900px}
.film video{
  width:100%;height:auto;display:block;background:var(--graphite);
  border-radius:var(--radius-bild);
}
.film .popisek{
  margin-top:var(--s2);font-size:13px;color:var(--graphite);opacity:.75;
}