/* ======================================================================
   Gestaltungsebene, 16.09.2026.

   Marios wollte keine Farbkorrektur, sondern ein anderes Auftreten:
   "σοβαρή σύγχρονη εταιρεία αρχιτεκτονικών κατασκευών" — helle Flaeche,
   Graphit fuer das Starke, Bronze nur als Akzent, viel Weissraum, echte
   Projektfotos statt Effekte.

   Diese Datei liegt bewusst hinter site.css und pages.css: die beiden
   stammen aus dem v28-Entwurf und arbeiten in weiten Teilen mit
   !important. Was hier steht, ueberschreibt das gezielt, statt in den
   alten Dateien zu suchen.
   ====================================================================== */

:root {
  --paper:   #f8f6f2;   /* warmes Off-White, Grundflaeche           */
  --cream:   #efece5;   /* zweite Flaeche, fuer Wechsel             */
  --ink:     #1b1e1f;   /* Graphit, Text                            */
  --char:    #212526;   /* Graphit, Flaechen                        */
  --muted:   #6b6963;
  --line:    #e2ddd3;
  --gold:    #a9814d;   /* Bronze, gedeckt                          */
  --gold2:   #c8a878;
  --gold-text: #8c6a3c;
}

body { background: var(--paper); color: var(--ink); }

/* ---- Kopf: duenne Kontaktzeile, helle Navigation -------------------- */
.topbar {
  background: var(--cream) !important; color: var(--muted) !important;
  border-bottom: 1px solid var(--line) !important; font-size: 12.5px !important;
}
.topbar .wrap { padding: 6px 0 !important; }
.topbar a:hover, .address-link:hover { color: var(--gold-text) !important; }
.address-icon { color: var(--gold) !important; }

.nav {
  background: rgba(248,246,242,.94) !important; color: var(--ink) !important;
  border-bottom: 1px solid var(--line) !important; backdrop-filter: blur(10px);
}
.navin { min-height: 68px; gap: 32px; }
.brand { gap: 9px; }
.brand-mark { display: block; width: 62px; height: 62px; flex: none; }
.brand-text strong { font-size: 19px; letter-spacing: .1em; color: var(--ink); }
.brand-text small { color: #4a4843 !important; letter-spacing: .14em; font-weight: 600; }
.menu a {
  color: var(--ink) !important; font-size: 13px; letter-spacing: .02em;
  padding: 24px 0 !important;
}
.menu a:hover { color: var(--gold-text) !important; border-bottom-color: var(--gold) !important; }
.menu-toggle { color: var(--ink) !important; border-color: var(--line) !important;
               background: transparent !important; }
.langbar { background: transparent; border-bottom: 1px solid var(--line); }
.langbar a { color: var(--muted); }

/* Der Angebotsknopf ist kein Schaufenster mehr: die Seite ist Referenz
   und Portfolio, nicht Landing-Page (Marios, 16.09.2026). */
.nav .nav-cta, .navin .nav-cta, .nav .btn.gold, .navin .btn.gold {
  background: transparent !important; color: var(--ink) !important;
  border: 1px solid var(--line) !important; font-weight: 600 !important;
}

/* ---- Schaltflaechen: Graphit fuehrt, Bronze ist Akzent -------------- */
.btn { border-radius: 2px; font-weight: 600; letter-spacing: .01em; padding: 14px 22px; }
.btn.gold { background: var(--ink) !important; color: #f6f4f0 !important; border-color: var(--ink) !important; }
.btn.gold:hover { background: #000 !important; }
.btn.outline { border-color: var(--line) !important; color: var(--ink) !important; }
.btn.outline:hover { border-color: var(--gold) !important; color: var(--gold-text) !important; }
.btn.ghost { border: 1px solid var(--line) !important; color: inherit; }

/* ---- Typografie und Abstaende --------------------------------------- */
.section { padding: 96px 0; }
.section.alt { background: var(--cream); }
.section.dark { background: var(--char); color: #f1efe9; }
.section-head { margin-bottom: 44px; align-items: start; }
.section-head h2 {
  font-size: clamp(28px, 3.1vw, 42px); line-height: 1.08;
  letter-spacing: -.025em; font-weight: 700; text-wrap: balance;
}
.section-head p { color: var(--muted); font-size: 16.5px; max-width: 46ch; }
.eyebrow { color: var(--gold-text) !important; letter-spacing: .2em; font-size: 11px; }
.dark .eyebrow { color: var(--gold2) !important; }
.goldline { width: 40px; height: 1px; background: var(--gold); margin-top: 18px; }

/* ---- Aufmacher: 40 Prozent Text, 60 Prozent Foto -------------------- */
.hero.hero-split {
  background: var(--paper) !important; color: var(--ink) !important;
  min-height: 0; display: block; padding: 0;
}
.hero-split .hero-inner {
  display: grid; grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
  align-items: stretch; gap: 0; padding: 0 !important; max-width: none !important;
}
.hero-split .hero-copy {
  background: var(--paper); padding: 88px clamp(24px, 4vw, 72px) 88px
              max(24px, calc((100vw - 1180px) / 2));
  display: flex; flex-direction: column; justify-content: center;
}
.hero-split h1 {
  font-size: clamp(34px, 4vw, 56px); line-height: 1.04; letter-spacing: -.035em;
  color: var(--ink); margin: 18px 0 20px; max-width: 16ch;
}
.hero-split .hero-copy p { color: var(--muted); font-size: 17px; max-width: 46ch; }
.hero-split .actions { margin-top: 32px; }
.hero-split .hero-photo { position: relative; background: none; min-height: 520px; }
.hero-split .hero-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.hero-split .hero-photo:after { content: none; }
/* Kein dunkles Overlay — nur ein weicher Anschluss an die Textflaeche. */
.hero-split .hero-photo:before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 120px; z-index: 1;
  background: linear-gradient(90deg, var(--paper), rgba(248,246,242,0));
}
.hero-split .hero-credit {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  background: linear-gradient(0deg, rgba(20,22,23,.72), rgba(20,22,23,0));
  color: #fff; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  padding: 38px 20px 16px; text-align: right;
}

/* ---- Vertrauensleiste: hell, duenn, drei Felder --------------------- */
.trustbar {
  background: var(--paper) !important; color: var(--ink) !important;
  border-top: 1px solid var(--line) !important; border-bottom: 1px solid var(--line) !important;
}
.trustgrid { grid-template-columns: repeat(4, 1fr) !important; }
.trust {
  padding: 22px 26px !important; border-right: 1px solid var(--line) !important;
  display: flex; flex-direction: column; gap: 4px;
}
.trust:last-child { border-right: 0 !important; }
.trust b { color: var(--ink) !important; font-size: 15px !important; letter-spacing: 0; }
.trust span { color: var(--muted) !important; font-size: 13.5px; }
.trust-stars { color: var(--gold) !important; letter-spacing: .12em; }
a.trust:hover b { color: var(--gold-text) !important; }

/* ---- Was wir bauen: drei grosse Bildkarten -------------------------- */
.services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
#services .service, #services .service-link, .services .service {
  background: transparent !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important; display: block; overflow: hidden; padding: 0 !important;
}
#services .service-photo, .service-photo { aspect-ratio: 4 / 3; overflow: hidden; background: var(--cream); }
.service-photo img { width: 100%; height: 100%; object-fit: cover;
                     transition: transform .5s ease; }
.service:hover .service-photo img { transform: scale(1.03); }
#services .service-copy, .service-copy { padding: 18px 2px 0 !important; }
.service-copy h3 { font-size: 21px; letter-spacing: -.01em; margin: 0 0 8px; }
.service-copy p { color: var(--muted); font-size: 15px; margin: 0; }
.service-more { display: inline-block; margin-top: 14px; color: var(--gold-text) !important;
                font-weight: 600; font-size: 14px; }

/* ---- Projekte ------------------------------------------------------- */
#projects .erga-grid { grid-template-columns: repeat(3, 1fr); gap: 26px; }
#projects .erga-card { border: 0 !important; background: transparent !important;
                       box-shadow: none !important; border-radius: 0 !important; }
#projects .erga-card img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

/* ---- Vier Schritte -------------------------------------------------- */
.flow { list-style: none; margin: 0; padding: 0; max-width: none;
        display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.flow-step { border-top: 1px solid var(--line); padding-top: 18px; }
.flow-step::before, .flow-step::marker { content: none; }
.flow-no { display: block; font-size: 13px; letter-spacing: .2em;
           color: var(--gold-text); font-weight: 700; margin-bottom: 10px; }
.flow-step h3 { font-size: 17px; margin: 0 0 8px; letter-spacing: -.01em; }
.flow-step p { color: var(--muted); font-size: 14.5px; margin: 0; }

/* ---- Bewertungen ---------------------------------------------------- */
#reviews .rv-summary strong { font-size: 30px; letter-spacing: -.02em; }
#reviews .rv-stars { color: var(--gold) !important; letter-spacing: .1em; }
#reviews .rv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
#reviews .rv-card {
  background: var(--white); border: 1px solid var(--line); border-radius: 2px;
  padding: 24px; margin: 0;
}
#reviews blockquote { font-size: 15px; line-height: 1.6; margin: 10px 0 14px; }
#reviews figcaption { color: var(--muted); font-size: 13px; }

/* ---- Nachweise als ruhige Zeile ------------------------------------- */
.certmini-grid { list-style: none; margin: 0; padding: 0;
                 display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.certmini { border-top: 1px solid var(--line); padding-top: 16px; }
.certmini b { display: block; font-size: 17px; letter-spacing: .01em; }
.certmini span { display: block; color: var(--muted); font-size: 14px; margin: 4px 0 8px; }
.certmini small { color: var(--muted); font-size: 12.5px; letter-spacing: .02em; }

/* ---- Vier Vorschaukarten -------------------------------------------- */
.preview-section { background: var(--cream); }
.preview-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.preview-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: 2px;
  padding: 24px; display: flex; flex-direction: column; gap: 8px;
  transition: border-color .2s ease;
}
.preview-card:hover { border-color: var(--gold); }
.preview-card strong { font-size: 17px; }
.preview-card span { color: var(--muted); font-size: 14.5px; }
.preview-card em { font-style: normal; color: var(--gold-text); margin-top: auto; padding-top: 10px; }

/* ---- Regionen schlank ----------------------------------------------- */
#areas { padding-bottom: 40px; }

/* ---- Fuss ----------------------------------------------------------- */
footer.site-footer, .site-footer { background: var(--char); }

/* ---- Handy und Tablet ------------------------------------------------ */
@media (max-width: 1000px) {
  .services, #projects .erga-grid, .flow,
  .certmini-grid, .preview-grid, #reviews .rv-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .hero-split .hero-inner { grid-template-columns: 1fr; }
  .hero-split .hero-photo { min-height: 340px; }
  .hero-split .hero-photo:before { content: none; }
  .hero-split .hero-copy { padding: 56px 24px 44px; }
  .trustgrid { grid-template-columns: 1fr !important; }
  .trust { border-right: 0 !important; border-bottom: 1px solid var(--line) !important; }
}
@media (max-width: 680px) {
  .section { padding: 64px 0; }
  .services, #projects .erga-grid, .flow,
  .certmini-grid, .preview-grid, #reviews .rv-grid { grid-template-columns: 1fr; }
  .hero-split h1 { max-width: none; }
}

/* ---- Zeichen der Systemhersteller ----------------------------------- */
.trust-mark { justify-content: center; gap: 10px; }
.trust-mark span { font-size: 12.5px; }
/* Hoehe so, dass die Zeile "Building excellence every day" im
   ALUMIL-Zeichen lesbar bleibt — ein Herstellerzeichen wird weder
   beschnitten noch umgefaerbt. */
.partner-mark { display: block; height: 30px; width: auto; max-width: 100%;
                object-fit: contain; object-position: left center; opacity: .9; }
.partner-mark--ce { height: 26px; }
.partner-mark--text {
  font-size: 12.5px; letter-spacing: .16em; font-weight: 700;
  color: var(--ink); border: 1px solid var(--line); border-radius: 2px;
  padding: 4px 9px; line-height: 1;
}
a.trust:hover .partner-mark { opacity: 1; }
.partner-mark--ce { color: var(--ink); opacity: .75; }

/* ======================================================================
   Naeher am Entwurf, den Marios geschickt hat (16.09.2026):
   Foto ueber die volle Breite, Text auf einer hellen Flaeche darueber,
   zweite Zeile der Ueberschrift in Bronze, Bronze als Hauptknopf,
   Symbole in der Vertrauensleiste.
   ====================================================================== */

.hero-split .hero-inner { position: relative; display: block; }
.hero-split .hero-photo {
  position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0;
}
.hero-split .hero-photo:before { content: none; }
.hero-split .hero-copy {
  position: relative; z-index: 2; background: none;
  width: min(100%, calc((100vw - 1180px) / 2 + 620px));
  min-height: 600px; padding: 96px 64px 96px max(24px, calc((100vw - 1180px) / 2));
}
/* Kein dunkles Overlay: eine helle Flaeche, die nach rechts ausblendet. */
.hero-split .hero-copy:before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg,
    rgba(248,246,242,.96) 0%, rgba(248,246,242,.93) 34%,
    rgba(248,246,242,.55) 62%, rgba(248,246,242,0) 86%);
}
.hero-split .eyebrow { display: flex; align-items: center; gap: 14px; }
.hero-split .eyebrow:after {
  content: ""; height: 1px; width: 56px; background: var(--gold); opacity: .8;
}
.hero-split h1 { max-width: 20ch; }
/* Klareres, weniger braunes Bronze (Marios); 3,2:1 auf Off-White,
   genug fuer Schrift dieser Groesse. */
.h1-accent { color: #a38660; }
.hero-split .btn.gold {
  background: var(--gold) !important; color: #1b1e1f !important;
  border-color: var(--gold) !important;
}
.hero-split .btn.gold:hover { background: #96703f !important; color: #fff !important; }
.hero-split .btn.outline { background: rgba(255,255,255,.55) !important; }

.trust { padding: 26px 28px !important; }
.trust-ico { width: 26px; height: 26px; color: var(--gold); margin-bottom: 6px; }
.trust-stars { display: none; }

@media (max-width: 1000px) {
  .hero-split .hero-photo { position: relative; height: 300px; }
  .hero-split .hero-copy {
    width: 100%; min-height: 0; padding: 44px 24px 48px;
    background: var(--paper);
  }
  .hero-split .hero-copy:before { content: none; }
}

/* ---- Kopfleiste dunkel, wie im Entwurf ------------------------------ */
.topbar {
  background: #16191a !important; color: #b9b3a8 !important;
  border-bottom: 0 !important;
}
.topbar a, .topbar .address-link { color: #cfc8bc !important; }
.topbar a:hover, .topbar .address-link:hover { color: var(--gold2) !important; }
.topbar .address-icon { color: var(--gold) !important; }
.topbar .tel-label { color: #8b8478 !important; letter-spacing: .14em; }
.top-socials { display: inline-flex; align-items: center; gap: 12px; margin-left: 4px; }
.top-social { display: inline-flex; padding: 2px; }
.top-social svg { width: 16px; height: 16px; display: block; }

/* Sprachumschalter sitzt jetzt in der dunklen Kopfleiste. */
.topbar .langbar { display: inline; background: none; border: 0; }
.topbar .langbar .wrap { display: inline; width: auto; padding: 0; margin: 0; }
.topbar .langbar a { color: #cfc8bc !important; margin-left: 14px; }
.topbar .langbar a:hover { color: var(--gold2) !important; }
.topbar .langbar a {
  border: 0 !important; background: none !important; padding: 0 !important;
  border-radius: 0 !important; text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 760px) {
  .topbar .top-contact { gap: 4px 12px; }
  .topbar .tel-label { display: none; }
}

/* Handy: erst das Foto, dann der Text — das Bild ist das Wichtige
   (Marios: "Η φωτογραφία πρέπει να είναι το σημαντικό οπτικό στοιχείο").
   Oben bleiben Adresse und die beiden Profile; die Nummern stehen in der
   Leiste unten am Bildschirmrand. */
@media (max-width: 1000px) {
  /* pages.css gibt dem Foto schon order:-1 — also normale Richtung. */
  .hero-split .hero-inner { display: flex; flex-direction: column; }
  /* pages.css kuerzt den Einleitungstext jedes Seitenkopfs auf dem Handy
     auf vier Zeilen ("…"). Auf /kagkela-perifraxeis/ brach so der Satz
     mitten ab (Hinweis von Marios, 16.09.2026). Ueberall ganz zeigen. */
  .hero p, .page-hero p {
    display: block !important; -webkit-line-clamp: unset !important;
    overflow: visible !important;
  }
}
@media (max-width: 620px) {
  .topbar .wrap { flex-direction: row !important; align-items: center;
                  justify-content: space-between; gap: 10px; }
  .topbar .top-contact { display: flex !important; justify-content: flex-end; }
  .topbar .top-contact > a[href^="tel:"], .topbar .top-more { display: none !important; }
  .topbar .langbar { display: inline; }
}

/* ======================================================================
   Seitenkoepfe der Unterseiten hell, wie die Startseite (16.09.2026).
   Vorher ein dunkles Band ueber die volle Breite — neben dem hellen
   Aufmacher der Startseite wirkte das wie eine andere Website.
   Betrifft .page-hero (System-, Regions-, Programmseiten usw.) und den
   schlichten .hero der sechs Kategorieseiten.
   ====================================================================== */
.hero:not(.hero-split), .page-hero {
  background: var(--paper) !important; color: var(--ink) !important;
  display: block !important; min-height: 0 !important;
  padding: 72px 0 52px !important;
  border-bottom: 1px solid var(--line);
}
.hero:not(.hero-split) .ey, .page-hero .ey {
  display: flex; align-items: center; gap: 14px;
  color: var(--gold-text) !important; font-size: 11px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; margin-bottom: 14px;
}
.hero:not(.hero-split) .ey:after, .page-hero .ey:after {
  content: ""; height: 1px; width: 56px; background: var(--gold); opacity: .8;
}
.hero:not(.hero-split) h1, .page-hero h1 {
  color: var(--ink) !important; font-size: clamp(32px, 4.2vw, 54px);
  line-height: 1.05; letter-spacing: -.03em; max-width: 24ch;
  margin: 0 0 18px; text-wrap: balance;
}
.hero:not(.hero-split) p, .page-hero p {
  color: var(--muted) !important; font-size: 17px; max-width: 62ch; margin: 0;
}
.hero:not(.hero-split) a, .page-hero a { color: var(--gold-text); }
@media (max-width: 680px) {
  .hero:not(.hero-split), .page-hero { padding: 44px 0 34px !important; }
}

@media (max-width: 480px) {
  .hero-split .eyebrow:after { display: none; }
}

/* ======================================================================
   Navigation schwarz, wie die Kopfleiste (Marios, 16.09.2026 abends:
   "fix the bar up with black colour"), und "BS METAL" etwas groesser.
   Das aufgeklappte Handymenue bleibt hell — dort gelten die Regeln
   darunter.
   ====================================================================== */
.nav {
  background: rgba(27,30,31,.97) !important; color: #f2efe9 !important;
  border-bottom: 1px solid #2c3031 !important;
}
.nav .brand-text strong { font-size: 23px !important; color: #f6f3ec !important; letter-spacing: .08em; }
.brand-text small { color: #cdbf9f !important; }
.menu a { color: #e9e5dd !important; }
.menu a:hover, .menu a[aria-current] { color: var(--gold2) !important; border-bottom-color: var(--gold) !important; }
.nav .nav-cta, .navin .nav-cta {
  color: #f6f3ec !important; border-color: #4a4e4f !important; background: transparent !important;
}
.nav .nav-cta:hover { border-color: var(--gold) !important; color: var(--gold2) !important; }
.menu-toggle { color: #f2efe9 !important; border-color: #4a4e4f !important; }
@media (max-width: 980px) {
  .menu { background: #ffffff !important; border: 1px solid var(--line) !important; }
  .menu a, .menu .nav-cta { color: var(--ink) !important; }
  .menu a:hover { color: var(--gold-text) !important; }
}
@media (max-width: 480px) {
  .nav .brand-text strong { font-size: 20px !important; }
}

/* Logo von Marios (16.09.2026): Zeichen und Schrift als ein Bild, fuer
   dunklen Grund gemacht — passt zur schwarzen Navigation. Freigestellt
   aus seiner Datei, Farben unveraendert. */
.brand-logo { display: block; height: 66px; width: auto; }
@media (max-width: 480px) { .brand-logo { height: 46px; } }