/* Ergaenzungen 2026 (TYPO3-14-Update): Barrierearmut, Fokus, Feinschliff */
.skip-link{position:absolute;left:-9999px;top:0;z-index:10000;background:#7ba02a;color:#fff;padding:10px 16px;font-weight:bold;text-decoration:none}
.skip-link:focus{left:10px;top:10px}
a:focus-visible,.b_button:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #7ba02a;outline-offset:2px}
main#content{display:block}
img{max-width:100%;height:auto}

/* Kontaktformular (TYPO3-Formularmodul) im Stil des bisherigen Powermail-Formulars */
.frame-type-form_formframework form{width:100%;clear:both}
.frame-type-form_formframework .form-element{display:grid;grid-template-columns:30% 70%;align-items:start;margin-bottom:10px}
.frame-type-form_formframework .form-label{padding-top:15px;margin:0}
.frame-type-form_formframework .form-label .required,
.frame-type-form_formframework .form-check-label .required{color:#7ba02a;margin-left:2px}
.frame-type-form_formframework .form-control{width:100%;display:block;border:0;padding:15px 0;border-bottom:2px solid #181a19;font-family:inherit;font-size:inherit;color:inherit;-webkit-appearance:none;border-radius:0;background:transparent}
.frame-type-form_formframework textarea.form-control{resize:vertical;height:200px}
.frame-type-form_formframework .form-element-check{grid-template-columns:30% 70%}
.frame-type-form_formframework .form-check-wrapping-label{grid-column:2;display:flex;gap:12px;align-items:flex-start;margin-top:15px}
.frame-type-form_formframework .form-check-input{width:24px;height:24px;margin-top:2px;flex:none;accent-color:#7ba02a}
.frame-type-form_formframework .actions{display:flex;justify-content:flex-end;margin-top:50px}
.frame-type-form_formframework .btn{font-family:'Wotfard Light',arial,sans-serif;font-size:inherit;color:#000;background:transparent;border:1px solid #272727;padding:13px 50px;cursor:pointer;position:relative;z-index:1;transition:color .5s ease;border-radius:0}
.frame-type-form_formframework .btn::after{content:'';position:absolute;z-index:-1;top:0;left:0;width:0;height:100%;background:#000;transition:width .5s}
.frame-type-form_formframework .btn:hover,.frame-type-form_formframework .btn:focus-visible{color:#fff}
.frame-type-form_formframework .btn:hover::after,.frame-type-form_formframework .btn:focus-visible::after{width:100%}
@media (max-width:767px){
  .frame-type-form_formframework .form-element,.frame-type-form_formframework .form-element-check{grid-template-columns:100%}
  .frame-type-form_formframework .form-check-wrapping-label,.frame-type-form_formframework .invalid-feedback,.frame-type-form_formframework .help-block{grid-column:1}
  .frame-type-form_formframework .actions{justify-content:stretch}
  .frame-type-form_formframework .btn{width:100%}
}

/* ===== Optimierungen nach Gesamtprüfung 05.11.2026 ===== */
:root{--gruen:#7ba02a;--gruen-dunkel:#58761c;--dunkel:#181a19}
html{scroll-padding-top:110px}

/* Textlinks: barrierefreier Kontrast (5,2:1 statt 3,0:1) */
#content .ce-bodytext a:not(.moreinfo a){color:var(--gruen-dunkel)}
#footer a{color:var(--dunkel)}

/* Kopfleiste: immer sichtbar (vorher erst nach dem Scrollen). Oben transparent ueber dem Bild, nach dem Scrollen weiss */
#top{opacity:1;background:transparent;transition:background .4s ease,box-shadow .4s ease}
#top:not(.scrolled){background:linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,0))}
#top.scrolled{background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.08)}
#top:not(.scrolled) #logo img{filter:brightness(0) invert(1)}
#top:not(.scrolled) .b_open{color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.6)}
/* Startseite: grosses Logo steht schon im Bild – kleines Logo erst beim Scrollen */
.seite-1 #top:not(.scrolled) #logo{visibility:hidden}

/* Menue-Knoepfe als echte Schaltflaechen (Touch-Ziel >= 44px) */
button.b_button{background:none;border:0;font:inherit;color:inherit;cursor:pointer}
.b_open{min-height:44px;min-width:44px;padding:9px 12px;margin-top:-4px;font-size:18px;text-transform:uppercase}
#navi .b_close{position:absolute;top:30px;right:30px;left:auto;bottom:auto;width:56px;height:56px;padding:0;z-index:60;
  background:rgba(24,26,25,.92) url(../images/X_Menue.png) center/30px auto no-repeat;border-radius:50%;filter:none}
#navi .b_close:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* Menue: deckender, kontrastreicher Hintergrund; aktiver Punkt unterstrichen */
#navi #main-navi{background:rgba(24,26,25,.92)}
#navi #main-navi li.act a{color:#fff;text-decoration:underline;text-decoration-color:var(--gruen);text-decoration-thickness:3px;text-underline-offset:8px}
#navi #main-navi li:hover a{color:#c7e08a}
#navi #main-navi a:focus-visible{outline:3px solid var(--gruen);outline-offset:4px}

/* Zwischenheader und Seiten-Header: Schrift auf Bildern lesbar */
@media (min-width:1025px){#content > .frame-contentheader::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.35);z-index:1;pointer-events:none}}
#subheader header h1,#subheader header h2,#content > .frame-contentheader header h2{text-shadow:0 2px 6px rgba(0,0,0,.7),0 0 30px rgba(0,0,0,.5)}

/* Portfolio-Kacheln: Name immer sichtbar (vorher nur bei Mausberuehrung), auch per Tastatur */
#content > .frame-teaser .ce-column .image-caption,#content > .frame-gallery .ce-column .image-caption{opacity:1;z-index:2;text-shadow:0 1px 6px rgba(0,0,0,.6)}
#content > .frame-teaser .ce-column a:focus-visible,#content > .frame-gallery .ce-column a:focus-visible{outline:3px solid var(--gruen);outline-offset:3px}
#content > .frame-teaser .ce-column a:focus-visible img,#content > .frame-gallery .ce-column a:focus-visible img{transform:scale(1.05)}

/* Lesbarkeit: Zeilenlaenge begrenzen, Fliesstext etwas kraeftiger */
#content .ce-bodytext p,#content .ce-bodytext li{max-width:75ch}
body{font-size:17px}

/* Fusszeile: Links gross genug zum Antippen */

/* Kontaktformular: Fehler direkt am Feld, groessere Checkbox */
.frame-type-form_formframework .form-check-label{cursor:pointer}
.frame-type-form_formframework .has-error .form-control,.frame-type-form_formframework [aria-invalid="true"]{border-bottom-color:#c30000}
.frame-type-form_formframework .error.help-block,.frame-type-form_formframework .form-text.text-danger,.frame-type-form_formframework .invalid-feedback{display:block;grid-column:2;color:#b00000;font-size:15px;margin-top:4px}
.frame-type-form_formframework altcha-widget{grid-column:2;display:block;margin-top:10px;max-width:320px}

/* Projektseiten: Handlungsaufforderung */
.projekt-cta{clear:both;margin:60px 5% 100px;padding:40px;background:#f4f7ee}
.projekt-cta h2{font-size:32px;margin:0 0 16px}
.projekt-cta h2::after{display:none}
.projekt-cta p{margin:0 0 24px;max-width:60ch}
.projekt-cta .cta-knoepfe{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.projekt-cta a.cta-primaer{display:inline-block;background:var(--gruen-dunkel);color:#fff;padding:14px 28px;text-decoration:none;font-family:'Wotfard Medium',arial,sans-serif}
.projekt-cta a.cta-primaer:hover,.projekt-cta a.cta-primaer:focus-visible{background:var(--dunkel);color:#fff}
.projekt-cta a.cta-tel{color:var(--dunkel);font-family:'Wotfard Medium',arial,sans-serif;padding:14px 0}


@media (max-width:767px){
  html{scroll-padding-top:90px}
  .projekt-cta{margin:40px 0 80px;padding:28px 20px}
  .projekt-cta h2{font-size:26px}
  .projekt-cta a.cta-primaer{width:100%;text-align:center}
  .frame-type-form_formframework .error.help-block,.frame-type-form_formframework .invalid-feedback,.frame-type-form_formframework altcha-widget{grid-column:1}
}


/* ===== Aenderungswuensche Designerin 09.11.2026 ===== */

/* 1) Portfolio-Einleitung zweispaltig wie "Aktuelle Projekte", mehr Abstand zu den Kacheln */
@media (min-width:981px){
  .seite-10 #content > .frame-teaser .ce-bodytext{columns:2;column-gap:6%;max-width:988px}
  .seite-10 #content > .frame-teaser .ce-bodytext p{max-width:none}
}
.seite-10 #content > .frame-teaser .ce-bodytext{margin-bottom:170px}
@media (max-width:767px){.seite-10 #content > .frame-teaser .ce-bodytext{margin-bottom:130px}}

/* 2) Schaltflaechen ueber Kacheln (z. B. "Neue Ideen zur Gartengestaltung"): Abstand zu den Bildern */
#content > .frame-teaser .ce-bodytext{margin-bottom:40px}

/* 3) Fusszeile: ueberall gleiche Zeilenabstaende (34 px Zeilenhoehe = Tippflaeche je Zeile) */
#footer .ce-bodytext p{line-height:2;margin:0}
#footer .ce-bodytext a{display:inline;padding:0;line-height:2}
#footer .columntext > .textblock{margin-top:0}

/* 5) Fotos hell zeigen: Projektfotos (Galerie) nie abdunkeln; Kacheln nur dezent hinter der Schrift toenen */
#content > .frame-gallery .ce-column a img,#content > .frame-gallery .ce-column:hover a img{opacity:1}
#content > .frame-teaser .ce-column a::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(0,0,0,.38) 0%,rgba(0,0,0,.12) 60%,rgba(0,0,0,0) 100%);pointer-events:none}
@media (max-width:1024px){
  #content > .frame-teaser .ce-column a img{opacity:1}
}
/* Kopfleiste: nur auf Seiten MIT grossem Kopfbild oben transparent (Klasse vom Server, kein :has noetig) */
body:not(.mit-kopfbild) #top{background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.08)}
body:not(.mit-kopfbild) #top #logo img{filter:none}
body:not(.mit-kopfbild) #top .b_open{color:inherit;text-shadow:none}

/* 7) Schnellkontakt-Leiste fuer Handy und Tablet (wie hautarzt-passau.de): Anrufen + Anfrage */
.schnellkontakt{display:none}
@media screen and (max-width:1024px){
  .schnellkontakt{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--gruen-dunkel);box-shadow:0 -2px 8px rgba(0,0,0,.18);padding-bottom:env(safe-area-inset-bottom,0)}
  .schnellkontakt__knopf,.schnellkontakt__knopf:hover{flex:1 1 50%;display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:56px;color:#fff;font-family:'Wotfard Medium',arial,sans-serif;font-size:17px;letter-spacing:.02em;text-decoration:none}
  .schnellkontakt__knopf + .schnellkontakt__knopf{border-left:1px solid rgba(255,255,255,.35)}
  .schnellkontakt__knopf:active{background:rgba(0,0,0,.15)}
  .schnellkontakt__knopf:focus-visible{outline:2px solid #fff;outline-offset:-4px}
  body{padding-bottom:calc(56px + env(safe-area-inset-bottom,0px))}
}
@media print{.schnellkontakt{display:none !important}}

/* ===== Feinschliff nach Design-Messung 09.11.2026 ===== */
/* Fusszeile: am PC steht "Facebook" (eigener Absatz) auf Hoehe von "Mobil", am Handy gleiche Blockabstaende */
#footer .ce-bodytext p:not(:first-of-type){margin-top:24px}
@media (min-width:981px){#footer .columntext > .textblock p:not(:first-of-type){margin-top:34px}}
#footer u{text-decoration:none}
/* Kacheltexte auf hellen Fotos besser lesbar, kein Umbruch-Gedraenge */
#content > .frame-teaser .ce-column .image-caption{padding:0 12px;box-sizing:border-box;text-shadow:0 1px 3px rgba(0,0,0,.8),0 0 18px rgba(0,0,0,.5)}
@media (min-width:981px){#content > .frame-teaser .ce-column .image-caption{font-size:18px}}
/* Handy/Tablet: Browser-Spruenge (Formularfehler, Anker) nicht unter die Schnellkontakt-Leiste */
@media (max-width:1024px){html{scroll-padding-bottom:72px}}
/* Handy: Senden-Knopf volle Breite (liegt in nav.form-navigation) */
@media (max-width:767px){.frame-type-form_formframework .form-navigation{width:100%}}

/* Zwischenheader auf Handy/Tablet (Rueckmeldung Designerin 10.11.2026): Bild wie alle Inhalte
   auf 90 % Breite zentriert statt links am Rand (vorher float + Eigenbreite: links 0, rechts Luft) */
@media (max-width:1024px){
#content > .frame-contentheader .ce-gallery{float:none;width:90%;margin:0 auto}
#content > .frame-contentheader .ce-row,#content > .frame-contentheader .ce-column,#content > .frame-contentheader figure.image{float:none;width:100%;margin:0}
}