/*
 * Wir in Willich – Hauptstylesheet
 * Warm & Einladend · Blaue Farbpalette · TYPO3 Site Package
 */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Source+Sans+3:wght@300;400;500;600;700&display=swap');

:root {
  --color-primary:        #2c5282;
  --color-primary-light:  #4a7fb5;
  --color-primary-lighter:#ebf4ff;
  --color-primary-dark:   #1a3557;
  --color-accent:         #d97706;
  --color-accent-light:   #fef3c7;
  --color-accent-hover:   #b45309;
  --color-white:          #ffffff;
  --color-warm-white:     #fdfaf6;
  --color-warm-light:     #f7f3ee;
  --color-warm-mid:       #e8e0d5;
  --color-text:           #2d3748;
  --color-text-muted:     #718096;
  --color-text-light:     #a0aec0;
  --color-border:         #e2d9ce;
  --color-bg:             var(--color-warm-white);
  --color-heading:        var(--color-primary-dark);
  --color-link:           var(--color-primary);
  --color-link-hover:     var(--color-primary-light);
  --font-display:         'Lora', Georgia, serif;
  --font-body:            'Source Sans 3', system-ui, sans-serif;
  --text-xs:    .75rem;
  --text-sm:    .875rem;
  --text-base:  1rem;
  --text-md:    1.125rem;
  --text-lg:    1.25rem;
  --text-xl:    1.5rem;
  --text-2xl:   1.875rem;
  --text-3xl:   2.25rem;
  --text-4xl:   3rem;
  --text-5xl:   3.75rem;
  --leading-tight:  1.25;
  --leading-normal: 1.75;
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-7:1.75rem; --space-8:2rem;
  --space-10:2.5rem; --space-12:3rem; --space-16:4rem; --space-20:5rem; --space-24:6rem;
  --container-max: 1200px;
  --container-pad: clamp(1.25rem, 5vw, 3rem);
  --header-h: 76px;
  --radius-sm:6px; --radius-md:12px; --radius-lg:20px; --radius-xl:32px;
  --shadow-sm: 0 1px 4px rgba(44,82,130,.08);
  --shadow-md: 0 4px 16px rgba(44,82,130,.12), 0 2px 6px rgba(44,82,130,.06);
  --shadow-lg: 0 12px 40px rgba(44,82,130,.15), 0 4px 12px rgba(44,82,130,.08);
  --ease: cubic-bezier(.4,0,.2,1);
  --duration-fast:160ms; --duration-base:280ms; --duration-slow:420ms;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);font-size:var(--text-md);line-height:var(--leading-normal);color:var(--color-text);background:var(--color-bg);-webkit-font-smoothing:antialiased}
img,svg,video{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit}
a{color:var(--color-link);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(44,82,130,.3);transition:color var(--duration-fast) var(--ease),text-decoration-color var(--duration-fast) var(--ease)}
a:hover{color:var(--color-link-hover);text-decoration-color:var(--color-primary-light)}
a:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px;border-radius:var(--radius-sm)}

h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:600;line-height:var(--leading-tight);color:var(--color-heading);letter-spacing:-.01em}
h1{font-size:clamp(var(--text-3xl),5vw,var(--text-5xl))}
h2{font-size:clamp(var(--text-2xl),3.5vw,var(--text-4xl))}
h3{font-size:clamp(var(--text-xl),2.5vw,var(--text-3xl))}
h4{font-size:clamp(var(--text-lg),2vw,var(--text-2xl))}
h5{font-size:var(--text-lg)}
h6{font-size:var(--text-md)}

p{margin-bottom:var(--space-4)}
p:last-child{margin-bottom:0}
ul,ol{padding-left:var(--space-6)}
li+li{margin-top:var(--space-2)}

blockquote{border-left:3px solid var(--color-accent);padding:var(--space-4) var(--space-6);margin:var(--space-8) 0;background:var(--color-accent-light);border-radius:0 var(--radius-md) var(--radius-md) 0;font-family:var(--font-display);font-style:italic;font-size:var(--text-lg)}
hr{border:none;border-top:1px solid var(--color-border);margin:var(--space-10) 0}

.skip-link{position:absolute;left:-9999px;top:var(--space-4);z-index:9999;background:var(--color-primary);color:var(--color-white);padding:var(--space-3) var(--space-6);border-radius:var(--radius-md);text-decoration:none;font-weight:600}
.skip-link:focus{left:var(--space-4)}

.container{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--container-pad)}

/* ── Header ──────────────────────────────────────────────────────────────────*/
.site-header{position:relative;z-index:100;background:var(--color-white);border-bottom:1px solid var(--color-border);box-shadow:0 2px 12px rgba(44,82,130,.06);height:var(--header-h);transition:box-shadow var(--duration-base) var(--ease)}
.site-header--sticky{position:sticky;top:0}
.site-header.is-scrolled{box-shadow:0 4px 24px rgba(44,82,130,.12)}
.site-header__inner{display:flex;align-items:center;gap:var(--space-8);height:100%}
.site-header__logo{flex-shrink:0;text-decoration:none;display:flex;align-items:center;gap:var(--space-3)}
.site-header__logo img{height:42px;width:auto}
.site-header__logo-text{font-family:var(--font-display);font-size:var(--text-xl);font-weight:700;color:var(--color-primary);letter-spacing:-.02em;line-height:1.1}

/* ── Navigation ──────────────────────────────────────────────────────────────*/
.main-nav{margin-left:auto}
.main-nav__list{display:flex;list-style:none;padding:0;gap:var(--space-1);align-items:center}
.main-nav__item{position:relative}
.main-nav__link{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);color:var(--color-text);text-decoration:none;font-size:var(--text-sm);font-weight:500;white-space:nowrap;transition:background var(--duration-fast) var(--ease),color var(--duration-fast) var(--ease);position:relative}
.main-nav__link::after{content:'';position:absolute;bottom:4px;left:var(--space-4);right:var(--space-4);height:2px;background:var(--color-accent);border-radius:2px;transform:scaleX(0);transition:transform var(--duration-base) var(--ease)}
.main-nav__link:hover,.main-nav__item.is-active>.main-nav__link{background:var(--color-primary-lighter);color:var(--color-primary)}
.main-nav__item.is-current>.main-nav__link{color:var(--color-primary);font-weight:600}
.main-nav__item.is-current>.main-nav__link::after{transform:scaleX(1)}
.main-nav__arrow{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform var(--duration-fast) var(--ease);flex-shrink:0}

/* Dropdown mit unsichtbarer Brücke gegen Einklappen */
.main-nav__dropdown{visibility:hidden;opacity:0;position:absolute;top:100%;left:0;min-width:220px;list-style:none;padding:var(--space-2);background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);z-index:200;transform:translateY(8px);transition:opacity var(--duration-base) var(--ease),transform var(--duration-base) var(--ease),visibility 0s linear var(--duration-base);margin-top:0}
.main-nav__dropdown::before{content:'';position:absolute;top:-12px;left:0;right:0;height:12px}
.main-nav__item.has-children:hover .main-nav__dropdown,
.main-nav__item.has-children:focus-within .main-nav__dropdown{visibility:visible;opacity:1;transform:translateY(0);transition:opacity var(--duration-base) var(--ease),transform var(--duration-base) var(--ease),visibility 0s linear 0s}
.main-nav__item.has-children:hover .main-nav__arrow{transform:rotate(225deg) translateY(-2px)}
.main-nav__dropdown-item+.main-nav__dropdown-item{border-top:1px solid var(--color-warm-light)}
.main-nav__dropdown-link{display:block;padding:var(--space-3) var(--space-4);color:var(--color-text);text-decoration:none;font-size:var(--text-sm);font-weight:400;border-radius:var(--radius-sm);transition:background var(--duration-fast) var(--ease),color var(--duration-fast) var(--ease),padding-left var(--duration-fast) var(--ease)}
.main-nav__dropdown-link:hover{background:var(--color-primary-lighter);color:var(--color-primary);padding-left:var(--space-6)}

/* Hamburger */
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:var(--space-2);background:var(--color-warm-light);border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;margin-left:auto;transition:background var(--duration-fast) var(--ease)}
.nav-toggle:hover{background:var(--color-primary-lighter)}
.nav-toggle span{display:block;height:2px;background:var(--color-primary);border-radius:2px;transition:transform var(--duration-base) var(--ease),opacity var(--duration-base) var(--ease)}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Sprachmenü */
.lang-menu__list{display:flex;list-style:none;padding:0;gap:var(--space-1)}
.lang-menu__link{padding:var(--space-1) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:var(--text-xs);font-weight:600;text-decoration:none;color:var(--color-text-muted);transition:all var(--duration-fast) var(--ease);letter-spacing:.05em}
.lang-menu__item.is-active .lang-menu__link,.lang-menu__link:hover{background:var(--color-primary);color:var(--color-white);border-color:var(--color-primary)}

/* ── Hero ────────────────────────────────────────────────────────────────────*/
.hero-area{background:linear-gradient(135deg,var(--color-primary-dark) 0%,var(--color-primary) 50%,var(--color-primary-light) 100%);color:var(--color-white);min-height:520px;display:flex;align-items:center;position:relative;overflow:hidden}
.hero-area .container{padding-block:var(--space-24);position:relative}

/* ── Content ─────────────────────────────────────────────────────────────────*/
.site-main{min-height:60vh}
.content-wrap{padding-block:var(--space-16)}
.content-wrap--two-col{display:grid;grid-template-columns:1fr;gap:var(--space-12)}
@media(min-width:768px){.content-wrap--two-col{grid-template-columns:3fr 2fr}}

.content-wrap > * + *{border-top:1px solid var(--color-border);padding-top:var(--space-10);margin-top:var(--space-10)}

/* Frame-Klassen */
.frame-default,.frame-white{background:var(--color-white)}
.frame-light{background:var(--color-warm-light)}
.frame-dark{background:var(--color-primary-dark);color:var(--color-white)}
.frame-dark h1,.frame-dark h2,.frame-dark h3,.frame-dark h4,.frame-dark h5,.frame-dark h6{color:var(--color-white)}
.frame-dark a{color:var(--color-accent-light)}
.frame-accent{background:linear-gradient(135deg,var(--color-accent),var(--color-accent-hover));color:var(--color-white)}
.frame-none{background:transparent}
.frame-default .ce-inner,.frame-white .ce-inner,.frame-light .ce-inner,.frame-dark .ce-inner,.frame-accent .ce-inner{max-width:var(--container-max);margin-inline:auto;padding-inline:var(--container-pad);padding-block:var(--space-16)}

.frame-space-before-small{margin-top:var(--space-8)}
.frame-space-before-medium{margin-top:var(--space-16)}
.frame-space-before-large{margin-top:var(--space-24)}
.frame-space-after-small{margin-bottom:var(--space-8)}
.frame-space-after-medium{margin-bottom:var(--space-16)}
.frame-space-after-large{margin-bottom:var(--space-24)}

/* Inhaltselemente */
.ce-header{margin-bottom:var(--space-6)}
.ce-header .header-link{text-decoration:none;color:inherit}
.ce-header .header-link:hover{color:var(--color-primary)}
.ce-textpic,.ce-textmedia{display:flex;flex-direction:column;gap:var(--space-8)}
.ce-textpic.ce-left .ce-gallery,.ce-textmedia.ce-left .ce-gallery{order:-1}
@media(min-width:640px){
  .ce-textpic.ce-left,.ce-textpic.ce-right,.ce-textmedia.ce-left,.ce-textmedia.ce-right{flex-direction:row;align-items:flex-start;gap:var(--space-10)}
  .ce-textpic .ce-gallery,.ce-textmedia .ce-gallery{flex:0 0 38%}
  .ce-textpic .ce-bodytext,.ce-textmedia .ce-bodytext{flex:1}
}
.ce-gallery figure{margin:0}
.ce-gallery img{border-radius:var(--radius-lg);box-shadow:var(--shadow-md);transition:transform var(--duration-slow) var(--ease),box-shadow var(--duration-slow) var(--ease)}
.ce-gallery img:hover{transform:scale(1.02);box-shadow:var(--shadow-lg)}
.ce-gallery figcaption{font-size:var(--text-sm);color:var(--color-text-muted);margin-top:var(--space-3);text-align:center;font-style:italic}
.ce-bullets ul{list-style:none;padding:0}
.ce-bullets li{padding-left:var(--space-7);position:relative;margin-bottom:var(--space-3)}
.ce-bullets li::before{content:'';position:absolute;left:0;top:.6em;width:10px;height:10px;border-radius:50%;background:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-light)}
.ce-table{overflow-x:auto;border-radius:var(--radius-md);box-shadow:var(--shadow-sm)}
.ce-table table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.ce-table th,.ce-table td{padding:var(--space-3) var(--space-5);text-align:left;border-bottom:1px solid var(--color-border)}
.ce-table th{background:var(--color-primary);color:var(--color-white);font-weight:600;font-family:var(--font-display)}
.ce-table tr:nth-child(even) td{background:var(--color-warm-light)}
.ce-table tr:last-child td{border-bottom:none}
.ce-table tr:hover td{background:var(--color-primary-lighter)}

/* Buttons */
.btn,a.btn{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-7);border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:600;text-decoration:none;cursor:pointer;border:2px solid transparent;transition:all var(--duration-base) var(--ease);line-height:1.2}
.btn-primary,a.btn-primary{background:var(--color-primary);color:var(--color-white);border-color:var(--color-primary)}
.btn-primary:hover,a.btn-primary:hover{background:var(--color-primary-dark);border-color:var(--color-primary-dark);color:var(--color-white);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.btn-accent,a.btn-accent{background:var(--color-accent);color:var(--color-white);border-color:var(--color-accent)}
.btn-accent:hover,a.btn-accent:hover{background:var(--color-accent-hover);color:var(--color-white);transform:translateY(-2px)}
.btn-outline,a.btn-outline{background:transparent;color:var(--color-primary);border-color:var(--color-primary)}
.btn-outline:hover,a.btn-outline:hover{background:var(--color-primary);color:var(--color-white)}

/* Karten */
.card{background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:box-shadow var(--duration-base) var(--ease),transform var(--duration-base) var(--ease)}
.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.card__image img{width:100%;aspect-ratio:16/9;object-fit:cover}
.card__body{padding:var(--space-6)}
.card__title{font-family:var(--font-display);font-size:var(--text-lg);margin-bottom:var(--space-3);color:var(--color-heading)}
.card__text{color:var(--color-text-muted);font-size:var(--text-sm);line-height:var(--leading-normal)}
.card__footer{padding:var(--space-4) var(--space-6);border-top:1px solid var(--color-border)}

/* Grids */
.grid{display:grid;gap:var(--space-8)}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}

/* Breadcrumb */
.breadcrumb{padding:var(--space-3) 0;margin-bottom:var(--space-8)}
.breadcrumb__list{display:flex;flex-wrap:wrap;list-style:none;padding:0;gap:var(--space-1);align-items:center;font-size:var(--text-sm);color:var(--color-text-muted)}
.breadcrumb__link{color:var(--color-primary);text-decoration:none;font-weight:500;transition:color var(--duration-fast) var(--ease)}
.breadcrumb__link:hover{color:var(--color-accent)}
.breadcrumb__separator{color:var(--color-text-light);margin-inline:var(--space-1);font-size:var(--text-lg);line-height:1}
.breadcrumb__current{color:var(--color-text-muted);font-weight:400}

/* ── Footer ──────────────────────────────────────────────────────────────────*/
.site-footer{background:var(--color-primary-dark);color:rgba(255,255,255,.75);position:relative;overflow:hidden}
.site-footer::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--color-accent),var(--color-primary-light),var(--color-accent))}
.site-footer__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-6);padding-block:var(--space-8)}
.site-footer__copy{font-size:var(--text-sm);color:rgba(255,255,255,.6)}
.footer-nav__list{display:flex;flex-wrap:wrap;list-style:none;padding:0;gap:var(--space-1)}
.footer-nav__link{padding:var(--space-2) var(--space-4);color:rgba(255,255,255,.7);text-decoration:none;font-size:var(--text-sm);border-radius:var(--radius-sm);transition:color var(--duration-fast) var(--ease),background var(--duration-fast) var(--ease),border-color var(--duration-fast) var(--ease);border:1px solid transparent}
.footer-nav__link:hover{color:var(--color-white);background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.15)}

/* Formulare */
.form-group{margin-bottom:var(--space-5)}
label{display:block;font-size:var(--text-sm);font-weight:600;margin-bottom:var(--space-2);color:var(--color-heading)}
input[type="text"],input[type="email"],input[type="tel"],input[type="url"],input[type="search"],input[type="password"],select,textarea{display:block;width:100%;padding:var(--space-3) var(--space-4);background:var(--color-white);border:1.5px solid var(--color-border);border-radius:var(--radius-md);font-size:var(--text-base);color:var(--color-text);transition:border-color var(--duration-fast) var(--ease),box-shadow var(--duration-fast) var(--ease)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--color-primary-light);box-shadow:0 0 0 3px rgba(74,127,181,.15)}
textarea{min-height:140px;resize:vertical}

/* Pagination */
.f3-widget-paginator{display:flex;flex-wrap:wrap;list-style:none;padding:0;gap:var(--space-2);margin-top:var(--space-12);justify-content:center}
.f3-widget-paginator li a,.f3-widget-paginator li span{display:flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 var(--space-3);border:1.5px solid var(--color-border);border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:500;text-decoration:none;color:var(--color-text);transition:all var(--duration-fast) var(--ease);background:var(--color-white)}
.f3-widget-paginator li a:hover{background:var(--color-primary);color:var(--color-white);border-color:var(--color-primary);transform:translateY(-1px)}
.f3-widget-paginator li.current span{background:var(--color-primary);color:var(--color-white);border-color:var(--color-primary)}

/* Utility */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.text-center{text-align:center}
.text-right{text-align:right}
.text-muted{color:var(--color-text-muted)}
.text-accent{color:var(--color-accent)}
.text-primary{color:var(--color-primary)}
.mt-0{margin-top:0}.mt-4{margin-top:var(--space-4)}.mt-8{margin-top:var(--space-8)}.mt-16{margin-top:var(--space-16)}
.mb-0{margin-bottom:0}.mb-4{margin-bottom:var(--space-4)}.mb-8{margin-bottom:var(--space-8)}

/* ── Responsive ──────────────────────────────────────────────────────────────*/
@media(max-width:1023px){
  .nav-toggle{display:flex}
  .main-nav{display:none;position:fixed;inset:var(--header-h) 0 0 0;background:var(--color-white);padding:var(--space-6);overflow-y:auto;border-top:3px solid var(--color-accent);box-shadow:var(--shadow-lg);z-index:99}
  .main-nav.is-open{display:block}
  .main-nav__list{flex-direction:column;gap:var(--space-1);align-items:stretch}
  .main-nav__link{padding:var(--space-4);font-size:var(--text-base);border-radius:var(--radius-md)}
  .main-nav__dropdown{visibility:visible;opacity:1;position:static;box-shadow:none;border:none;border-left:3px solid var(--color-accent);border-radius:0;padding:var(--space-2) 0 var(--space-2) var(--space-4);margin-top:var(--space-2);transform:none;display:none;transition:none}
  .main-nav__dropdown::before{display:none}
  .main-nav__item.has-children.is-open .main-nav__dropdown{display:block}
  .main-nav__item.has-children:hover .main-nav__dropdown,.main-nav__item.has-children:focus-within .main-nav__dropdown{display:block;visibility:visible;opacity:1;transform:none}
}

@media(max-width:639px){
  .site-footer__inner{flex-direction:column;align-items:flex-start;gap:var(--space-4)}
  .footer-nav__list{flex-direction:column}
  .content-wrap{padding-block:var(--space-10)}
  .content-wrap > * + *{padding-top:var(--space-8);margin-top:var(--space-8)}
}

@media print{
  .site-header,.site-footer,.nav-toggle,.skip-link,.breadcrumb{display:none!important}
  body{font-size:11pt;color:#000;background:#fff}
  a[href]::after{content:' (' attr(href) ')';font-size:.8em}
  h1,h2,h3{page-break-after:avoid;color:#000}
}