/* ==========================================================================
   AL – Gärten · Gebäude · Industrie
   Stylesheet

   Die Farben stammen direkt aus dem Logo und stehen hier ganz oben.
   Wer eine Farbe ändern will, ändert sie nur an dieser einen Stelle.
   ========================================================================== */

/* Schrift liegt lokal im Ordner "schriften". Bewusst NICHT über Google Fonts
   eingebunden: dabei würde die IP-Adresse jedes Besuchers an Google
   übertragen, was in Deutschland abmahnfähig ist. */
@font-face{
  font-family:'Archivo';
  src:url('schriften/archivo.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  /* Farben aus dem Logo */
  --tief:          #033D1C;   /* Dunkelgrün des Rings           */
  --tief-2:        #022B14;   /* noch dunkler                    */
  --gruen-dunkel:  #0F6B25;   /* Buttons und Text (gut lesbar)   */
  --gruen:         #28891B;   /* Mittelgrün des Buchstaben L     */
  --frisch:        #72C243;   /* Hellgrün des Blatts             */
  --text:          #14211D;   /* Schwarz des Buchstaben A        */
  --grau:          #4A5F53;   /* Fließtext                       */
  --papier:        #F2F8EE;   /* heller grüner Hintergrund       */
  --linie:         #D9E6D3;   /* Rahmen und Trennlinien          */
  --weiss:         #FFFFFF;

  --schrift: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --max:  1160px;
  --rand: 32px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:92px; }

body{
  margin:0;
  background:var(--weiss);
  color:var(--text);
  font-family:var(--schrift);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* Lange deutsche Wörter dürfen umbrechen, sonst scrollt die Seite
     auf schmalen Handys seitlich. */
  overflow-wrap:break-word;
  hyphens:auto;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ margin:0; line-height:1.1; letter-spacing:-0.02em; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }

.wrap{ max-width:var(--max); margin:0 auto; padding:0 var(--rand); }

:focus-visible{ outline:3px solid var(--frisch); outline-offset:3px; border-radius:4px; }

/* --- Buttons ------------------------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:11px;
  min-height:56px; padding:0 26px;
  border:2px solid transparent; border-radius:14px;
  font-family:var(--schrift); font-size:17px; font-weight:700; line-height:1.2;
  cursor:pointer;
  transition:background .18s ease, color .18s ease, transform .18s ease;
}
.btn svg{ flex:none; }
.btn:hover{ transform:translateY(-2px); }

.btn-gruen{ background:var(--gruen-dunkel); color:var(--weiss); }
.btn-gruen:hover{ background:var(--tief); }

.btn-linie{ background:var(--weiss); color:var(--tief); border-color:var(--tief); }
.btn-linie:hover{ background:var(--tief); color:var(--weiss); }

.btn-weiss{ background:var(--weiss); color:var(--tief); }
.btn-weiss:hover{ background:var(--frisch); }

.btn-klein{ min-height:48px; padding:0 20px; font-size:16px; }

/* --- Bilder und Platzhalter ---------------------------------------------
   Jedes Foto liegt in einem .bild-Container, darunter ein Platzhalter.
   Fehlt die Bilddatei, blendet das onerror-Attribut das <img> aus und der
   Platzhalter wird sichtbar. Foto unter dem richtigen Namen in den Ordner
   "bilder" legen - fertig, am Code muss nichts geändert werden.
   ------------------------------------------------------------------------ */
.bild{ position:relative; overflow:hidden; background:var(--papier); }
.bild > img{ position:relative; z-index:2; width:100%; height:100%; object-fit:cover; }
.platzhalter{
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; padding:20px; text-align:center; color:var(--gruen-dunkel);
  background:
    repeating-linear-gradient(135deg, rgba(15,107,37,.07) 0 2px, transparent 2px 14px),
    #E7F1E1;
}
.platzhalter b{
  font-size:13px; font-weight:700; color:var(--text);
  font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  background:var(--weiss); border:1px solid var(--linie);
  padding:3px 9px; border-radius:4px;
}
.platzhalter span{ font-size:14px; line-height:1.4; max-width:28ch; color:var(--grau); }

/* Markenfeld für Karten ohne Foto: ruhig und bewusst, kein Platzhalter-Look */
.platzhalter.marke{
  color:var(--frisch);
  background:
    radial-gradient(circle at 78% 22%, rgba(114,194,67,.22), transparent 55%),
    var(--tief);
}

/* --- Kopfzeile ---------------------------------------------------------- */
.kopf{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linie);
  transition:box-shadow .3s ease, border-color .3s ease;
}
.kopf.gescrollt{ box-shadow:0 10px 30px -18px rgba(3,61,28,.35); border-bottom-color:transparent; }
.kopf .wrap{
  height:88px; display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.logo{ display:flex; align-items:center; gap:14px; }
.logo img{ width:60px; height:60px; }
.logo-text{
  font-size:15px; font-weight:700; line-height:1.3; letter-spacing:0;
  color:var(--text);
}

.kopf-aktion{ display:flex; align-items:center; gap:10px; }

.nav{ display:flex; gap:34px; font-size:16px; font-weight:600; }
.nav a{ position:relative; padding:8px 0; }
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:2px; height:3px;
  background:var(--frisch); border-radius:2px; transition:right .22s ease;
}
.nav a:hover::after{ right:0; }

/* --- Abschnitte allgemein ---------------------------------------------- */
.block{ padding:96px 0; }
.block-papier{ background:var(--papier); }

.vor{
  display:inline-flex; align-items:center; gap:10px;
  font-size:14px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:var(--gruen-dunkel); margin-bottom:14px;
}
.vor::before{ content:""; width:28px; height:4px; background:var(--frisch); border-radius:2px; }

.block-kopf{ max-width:680px; margin-bottom:48px; }
.block-kopf h2, .h2{
  font-size:44px; font-weight:800; text-wrap:balance;
}
.block-kopf p{ margin-top:16px; font-size:18px; color:var(--grau); text-wrap:pretty; }

/* --- Hero ---------------------------------------------------------------
   Rechts loopt de foto door tot de rand van het scherm. De linkerrand is
   rond, met een lichtgroene lijn erlangs, net als de ring in het logo.
   ------------------------------------------------------------------------ */
.hero{
  position:relative; overflow:hidden; background:var(--papier);
  min-height:min(720px, calc(100vh - 88px)); display:flex; align-items:center;
}
.hero > .wrap{ position:relative; z-index:2; width:100%; }
.hero-raster{ display:block; }
.hero-text{ width:min(540px, 47%); padding:80px 0; }
.hero h1{ font-size:clamp(40px, 3.8vw, 54px); font-weight:800; letter-spacing:-0.03em; line-height:1.04; text-wrap:balance; }
.hero h1 .gruen{ color:var(--gruen-dunkel); }
.hero .lead{ margin-top:22px; font-size:19px; line-height:1.6; color:var(--grau); max-width:44ch; text-wrap:pretty; }
.hero-knoepfe{ display:flex; gap:14px; flex-wrap:wrap; margin-top:34px; }
.hero-ort{
  display:flex; align-items:center; gap:10px; margin-top:26px;
  font-size:16px; font-weight:600; color:var(--text);
}
.hero-ort svg{ color:var(--gruen); flex:none; }

.hero-foto{ position:absolute; z-index:1; top:0; right:0; bottom:0; width:50%; }
.hero-foto::before{
  content:""; position:absolute; top:0; bottom:0; right:0; left:-16px;
  background:var(--frisch);
  clip-path:ellipse(100% 125% at 100% 50%);
}
.hero-foto .bild{
  position:absolute; inset:0; background:var(--tief);
  clip-path:ellipse(100% 125% at 100% 50%);
}
.hero-foto .bild > img{ object-position:62% 38%; }
.hero-marke{
  position:absolute; z-index:3; left:17%; bottom:44px;
  display:flex; align-items:center; gap:12px;
  background:var(--weiss); border-radius:14px; padding:13px 18px 13px 14px;
  box-shadow:0 18px 40px -16px rgba(3,29,14,.55);
  font-size:15px; font-weight:700; line-height:1.25;
}
.hero-marke i{
  width:38px; height:38px; flex:none; border-radius:11px;
  background:var(--gruen-dunkel); color:var(--weiss);
  display:flex; align-items:center; justify-content:center;
}

/* Hero-Text erscheint beim Laden sanft */
.bewegt .hero-text > *{ animation:hoch .8s cubic-bezier(.2,.7,.2,1) both; }
.bewegt .hero-text > *:nth-child(2){ animation-delay:.08s; }
.bewegt .hero-text > *:nth-child(3){ animation-delay:.16s; }
.bewegt .hero-text > *:nth-child(4){ animation-delay:.24s; }
.bewegt .hero-text > *:nth-child(5){ animation-delay:.32s; }
.bewegt .hero-foto{ animation:weich 1.1s ease both; }
@keyframes hoch{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@keyframes weich{ from{ opacity:0; } to{ opacity:1; } }

/* --- Sanftes Einblenden beim Scrollen (nur mit JavaScript) --------------- */
.bewegt [data-zeige]{
  opacity:0; transform:translateY(22px);
  transition:opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1);
}
.bewegt [data-zeige].sichtbar{ opacity:1; transform:none; }
@media print{ .bewegt [data-zeige], .bewegt .hero-text > *, .bewegt .hero-foto{ opacity:1 !important; transform:none !important; animation:none !important; } }

/* --- Leistungen --------------------------------------------------------- */
.leistungen{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.leistung{
  background:var(--weiss); border:1px solid var(--linie); border-radius:18px; overflow:hidden;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.leistung:hover{
  transform:translateY(-4px); border-color:var(--frisch);
  box-shadow:0 26px 46px -28px rgba(3,61,28,.45);
}
.leistung .bild{ aspect-ratio:4/3; }
.leistung .bild > img{ transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.leistung:hover .bild > img{ transform:scale(1.05); }
.leistung-text{ padding:20px 24px 24px; }
.ohne-bild-icon, .ohne-bild-link{ display:none; }
.leistung.ohne-bild{
  background:linear-gradient(155deg, var(--gruen-dunkel) 0%, var(--tief) 78%);
  border-color:transparent; display:flex; flex-direction:column;
}
.leistung.ohne-bild .bild{ display:none; }
.leistung.ohne-bild .leistung-text{ flex:1; display:flex; flex-direction:column; padding:30px 28px 28px; }
.leistung.ohne-bild .ohne-bild-icon{
  display:flex; align-items:center; justify-content:center;
  width:60px; height:60px; border-radius:16px; margin-bottom:auto;
  background:rgba(114,194,67,.16); color:var(--frisch);
}
.leistung.ohne-bild h3{ color:var(--weiss); margin-top:28px; }
.leistung.ohne-bild p{ color:#C4DBC9; }
.leistung.ohne-bild .ohne-bild-link{
  display:inline-flex; align-items:center; gap:8px; margin-top:18px; align-self:flex-start;
  color:var(--frisch); font-weight:700; font-size:16px; padding:6px 0;
}
.leistung.ohne-bild .ohne-bild-link span{ transition:transform .2s ease; }
.leistung.ohne-bild .ohne-bild-link:hover span{ transform:translateX(4px); }
.leistung h3{ font-size:21px; font-weight:800; }
.leistung p{ margin-top:6px; font-size:16px; color:var(--grau); }

/* --- Einblicke (Fotostrecke) -------------------------------------------- */
.galerie{
  display:grid; gap:20px;
  grid-template-columns:1.55fr 1fr;
  grid-template-rows:1fr 1fr;
}
.galerie-bild{ margin:0; position:relative; border-radius:18px; overflow:hidden; }
.galerie-bild.gross{ grid-row:1 / 3; }
.galerie-bild .bild{ height:100%; min-height:220px; }
.galerie-bild.gross .bild{ min-height:460px; }
.galerie-bild .bild > img{ transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.galerie-bild:hover .bild > img{ transform:scale(1.04); }
.galerie-bild::after{
  content:""; position:absolute; inset:auto 0 0 0; height:45%; z-index:3; pointer-events:none;
  background:linear-gradient(to top, rgba(3,29,14,.62), transparent);
}
.galerie-bild figcaption{
  position:absolute; z-index:4; left:18px; bottom:16px;
  display:inline-flex; align-items:center; gap:9px;
  color:var(--weiss); font-size:16px; font-weight:700; letter-spacing:.01em;
}
.galerie-bild figcaption::before{
  content:""; width:22px; height:3px; border-radius:2px; background:var(--frisch);
}

/* --- Dunkles Band ------------------------------------------------------- */
.band{ position:relative; overflow:hidden; background:var(--tief); color:var(--weiss); padding:96px 0; }
.band-ring{
  position:absolute; z-index:0; right:-200px; top:50%;
  width:520px; height:520px; transform:translateY(-50%) rotate(-12deg);
  opacity:.14; pointer-events:none;
}
.band .wrap{ position:relative; z-index:1; }
.band .vor{ color:var(--frisch); }
.band h2{ font-size:44px; font-weight:800; max-width:20ch; text-wrap:balance; }
.werte{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:52px; }
.wert{
  padding:26px; border-radius:16px;
  background:#154B2C; border:1px solid rgba(255,255,255,.14);
  position:relative; z-index:1;
}
.wert svg{ color:var(--frisch); margin-bottom:14px; }
.wert b{ display:block; font-size:22px; font-weight:800; }
.wert span{ display:block; margin-top:6px; font-size:16px; color:#C4DBC9; }

/* --- Einsatzgebiet ------------------------------------------------------ */
.gebiet{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.gebiet-liste{ margin-top:8px; }
.gebiet-liste li{
  display:flex; align-items:center; gap:16px;
  padding:20px 0; border-bottom:1px solid var(--linie);
  font-size:21px; font-weight:700;
}
.gebiet-liste li:first-child{ border-top:1px solid var(--linie); }
.gebiet-liste svg{ color:var(--gruen); flex:none; }
.gebiet-karte{
  background:var(--gruen-dunkel); color:var(--weiss);
  border-radius:24px; padding:48px 40px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:16px;
}
.gebiet-karte svg{ color:var(--frisch); }
.gebiet-karte b{ font-size:28px; font-weight:800; line-height:1.15; }
.gebiet-karte p{ font-size:17px; color:#D5E9D9; max-width:30ch; margin-bottom:8px; }

/* --- Kontakt ------------------------------------------------------------ */
.kontakt-kopf{ text-align:center; max-width:640px; margin:0 auto 48px; }
.kontakt-kopf p{ margin-top:16px; font-size:18px; color:var(--grau); }
.kontakt-karten{ display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:900px; margin:0 auto; }
.kkarte{
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  padding:34px; border-radius:22px; border:2px solid var(--linie); background:var(--weiss);
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.kkarte:hover{
  transform:translateY(-4px); border-color:var(--gruen);
  box-shadow:0 26px 46px -28px rgba(3,61,28,.45);
}
.kkarte-icon{
  width:60px; height:60px; border-radius:18px; margin-bottom:12px;
  background:var(--gruen-dunkel); color:var(--weiss);
  display:flex; align-items:center; justify-content:center;
}
.kkarte small{ font-size:14px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--grau); }
.kkarte strong{ font-size:26px; font-weight:800; letter-spacing:-0.01em; line-height:1.2; }
.kkarte .los{
  margin-top:10px; font-size:16px; font-weight:700; color:var(--gruen-dunkel);
}
.anrufen{ text-align:center; margin-top:26px; font-size:16px; color:var(--grau); }
.anrufen a{
  display:inline-block; padding:10px 4px; font-weight:700;
  color:var(--gruen-dunkel); text-decoration:underline; text-underline-offset:3px;
}

/* --- Fußzeile ----------------------------------------------------------- */
.fuss{ background:var(--weiss); border-top:1px solid var(--linie); padding:44px 0 34px; }
.fuss-oben{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.fuss .logo img{ width:48px; height:48px; }
.fuss-links{ display:flex; gap:8px 26px; flex-wrap:wrap; font-size:16px; font-weight:600; }
.fuss-links a{ display:inline-block; padding:10px 0; }
.fuss-links a:hover{ color:var(--gruen-dunkel); text-decoration:underline; }
.fuss-unten{
  margin-top:26px; padding-top:22px; border-top:1px solid var(--linie);
  font-size:15px; color:var(--grau);
}

/* --- Unterseiten (Impressum / Datenschutz) ------------------------------ */
.seite{ padding:72px 0 96px; max-width:780px; }
.seite h1{ font-size:44px; font-weight:800; margin-bottom:12px; }
.seite h2{
  font-size:24px; font-weight:800; margin:44px 0 14px;
  padding-bottom:10px; border-bottom:1px solid var(--linie);
}
.seite p{ margin-bottom:14px; line-height:1.78; color:var(--grau); }
.seite p a{ display:inline-block; padding:4px 1px; color:var(--gruen-dunkel); text-decoration:underline; }
.seite p a.btn{ display:inline-flex; padding:0 26px; text-decoration:none; color:var(--tief); }
.seite p a.btn:hover{ color:var(--weiss); }
.seite p strong{ color:var(--text); }
.seite ul.punkte{ list-style:disc; padding-left:22px; margin-bottom:16px; color:var(--grau); }
.seite ul.punkte li{ margin-bottom:7px; line-height:1.6; }
.luecke{
  background:#FFF6D6; border:1px solid #E6CF7A; color:#5C4A0E;
  padding:2px 7px; border-radius:4px; font-weight:700; font-size:.94em;
}
.hinweis{
  background:#FFF6D6; border:1px solid #E6CF7A; color:#5C4A0E;
  padding:18px 22px; border-radius:10px; margin-bottom:30px; line-height:1.6;
}

/* ==========================================================================
   Schmale Bildschirme
   ========================================================================== */
@media (min-width:901px) and (max-width:1200px){
  .hero-knoepfe .btn{ padding:0 18px; font-size:16px; gap:9px; }
}

@media (max-width:900px){
  :root{ --rand:24px; }
  .nav{ display:none; }
  .kopf .wrap{ height:76px; }
  .logo img{ width:52px; height:52px; }

  .block, .band{ padding:68px 0; }
  .block-kopf h2, .h2, .band h2{ font-size:34px; }

  .hero{ display:flex; flex-direction:column; align-items:stretch; min-height:0; }
  .hero > .wrap{ order:1; }
  .hero-text{ width:auto; padding:44px 0 40px; }
  .hero h1{ font-size:44px; }
  .hero-foto{ order:2; position:relative; width:100%; aspect-ratio:4/3; }
  .hero-foto::before{ left:0; top:-12px; clip-path:ellipse(135% 100% at 50% 100%); }
  .hero-foto .bild{ clip-path:ellipse(135% 100% at 50% 100%); }
  .hero-marke{ left:24px; bottom:24px; }

  .leistungen{ grid-template-columns:1fr 1fr; }
  .werte{ grid-template-columns:1fr; gap:16px; margin-top:36px; }
  .gebiet{ grid-template-columns:1fr; gap:40px; }
  .galerie{ grid-template-columns:1fr 1fr; grid-template-rows:auto; gap:16px; }
  .galerie-bild.gross{ grid-column:1 / 3; grid-row:auto; }
  .galerie-bild.gross .bild{ min-height:0; aspect-ratio:16/10; }
  .galerie-bild .bild{ min-height:0; aspect-ratio:4/3; }
  .kontakt-karten{ grid-template-columns:1fr; }
}

@media (max-width:600px){
  :root{ --rand:20px; }
  body{ font-size:16px; }
  .logo-text{ font-size:14px; }
  .kopf-cta span{ display:none; }              /* nur das Symbol, spart Platz */
  .kopf-cta{ padding:0 14px; }

  .hero h1{ font-size:34px; }
  .hero .lead{ font-size:17px; }
  .hero-knoepfe{ flex-direction:column; align-items:stretch; }
  .hero-marke{ left:16px; bottom:16px; padding:10px 14px 10px 10px; font-size:14px; }
  .band-ring{ width:360px; height:360px; right:-150px; }

  .block-kopf h2, .h2, .band h2{ font-size:28px; }
  .leistungen{ grid-template-columns:1fr; }
  .gebiet-liste li{ font-size:19px; }
  .galerie{ gap:12px; }
  .galerie-bild{ border-radius:14px; }
  .galerie-bild figcaption{ left:14px; bottom:12px; font-size:15px; }
  .gebiet-karte{ padding:36px 24px; }
  .kkarte{ padding:26px; }
  .kkarte strong{ font-size:22px; }
  .seite h1{ font-size:31px; }
}

@media (max-width:380px){
  .kopf .logo-text{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}