/*
Theme Name: fa-e.de Familienportal
Theme URI: https://fa-e.de/
Author: Familie Ernst
Description: Privates, responsives Service-Portal für fa-e.de.
Version: 1.2.2
Text Domain: fae-portal
*/

:root {
  --bg-0:#2b2e33;
  --bg-1:#33373d;
  --bg-2:#3b4047;
  --surface:rgba(48,52,59,.80);
  --surface-strong:rgba(57,62,70,.94);
  --border:rgba(255,255,255,.14);
  --border-hover:rgba(255,255,255,.24);
  --text:#ffffff;
  --muted:#d4d7dc;
  --soft:#b3b8c0;
  --red:#e3564f;
  --yellow:#f1c84e;
  --blue:#4ea3ff;
  --green:#49c26f;
  --shadow:0 24px 70px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html{min-height:100%;background:var(--bg-0);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  min-height:100vh;margin:0;color:var(--text);overflow-x:hidden;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  background:
    radial-gradient(circle at 12% 12%, rgba(78,163,255,.12), transparent 22rem),
    radial-gradient(circle at 85% 15%, rgba(227,86,79,.10), transparent 20rem),
    radial-gradient(circle at 75% 80%, rgba(73,194,111,.09), transparent 22rem),
    radial-gradient(circle at 48% 100%, rgba(241,200,78,.08), transparent 24rem),
    linear-gradient(180deg, #3a3f46 0%, #30343a 42%, #292c31 100%);
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}

.site-bg,.site-bg::before,.site-bg::after{position:fixed;inset:0;pointer-events:none;content:""}
.site-bg{z-index:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:46px 46px;mask-image:linear-gradient(to bottom,#000,transparent 92%)}
.site-bg::before{inset:14rem auto auto 36%;width:42rem;height:10rem;border:1px solid rgba(255,255,255,.05);border-radius:50%;transform:rotate(-7deg)}
.site-bg::after{inset:19rem -6rem auto auto;width:35rem;height:9rem;border:1px solid rgba(255,255,255,.045);border-radius:50%;transform:rotate(7deg)}

.portal{
  position:relative;z-index:1;
  width:min(1380px,calc(100% - 48px));
  margin:0 auto;
  padding:max(26px,env(safe-area-inset-top)) 0 max(22px,env(safe-area-inset-bottom));
}

.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(350px,44%);align-items:center;gap:22px;padding:34px 0 34px}
.hero-copy{padding-left:2px}
.hero h1{margin:0;font-size:clamp(3.4rem,6.6vw,5.7rem);line-height:.94;letter-spacing:-.055em;font-weight:360;text-shadow:0 2px 18px rgba(0,0,0,.18)}
.hero h2{margin:15px 0 0;font-size:clamp(2rem,4vw,3.2rem);line-height:1.05;letter-spacing:-.042em;font-weight:380;background:linear-gradient(90deg,var(--red) 0%, var(--yellow) 33%, var(--blue) 66%, var(--green) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-rule{width:118px;height:3px;margin:31px 0 27px;border-radius:99px;background:linear-gradient(90deg,var(--red) 0%, var(--yellow) 33%, var(--blue) 66%, var(--green) 100%);position:relative;box-shadow:0 0 16px rgba(255,255,255,.05)}
.hero-rule::before{content:"";position:absolute;left:-6px;top:50%;width:9px;height:9px;transform:translateY(-50%);border-radius:50%;background:var(--blue);box-shadow:0 0 16px rgba(78,163,255,.35)}
.hero p{margin:0;color:var(--muted);font-size:clamp(1.05rem,1.65vw,1.42rem);line-height:1.68;font-weight:360;text-shadow:0 1px 10px rgba(0,0,0,.12)}
.hero-art{min-height:380px;display:grid;place-items:center;position:relative}
.hero-art::before{content:"";position:absolute;width:92%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.13),rgba(255,255,255,.04) 38%,transparent 70%);filter:blur(18px)}
.hero-art img{position:relative;width:min(96%,620px);height:auto;opacity:.72;filter:drop-shadow(0 16px 34px rgba(0,0,0,.22));transform:translateY(6px)}

.service-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;padding:8px 0 30px}
.service-card{position:relative;min-height:350px;padding:32px 22px 20px;display:flex;flex-direction:column;align-items:center;text-align:center;overflow:hidden;border:1px solid var(--border);border-radius:26px;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(0,0,0,.025)),var(--surface);box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 18px 48px rgba(0,0,0,.26), var(--shadow);backdrop-filter:blur(13px);-webkit-backdrop-filter:blur(13px);transition:transform .22s ease,border-color .22s ease,background .22s ease,box-shadow .22s ease}
.service-card::after{content:"";position:absolute;inset:auto 12% -32% 12%;height:42%;border-radius:50%;background:var(--glow);filter:blur(42px);opacity:.12;transition:opacity .22s ease,transform .22s ease}
.service-card:hover,.service-card:focus-visible{transform:translateY(-5px);border-color:var(--border-hover);background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(0,0,0,.035)),var(--surface-strong);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 28px 80px rgba(0,0,0,.42);outline:none}
.service-card:hover::after,.service-card:focus-visible::after{opacity:.22;transform:scale(1.08)}
.service-card.nextcloud{--accent:var(--blue);--glow:rgba(78,163,255,.55)}
.service-card.immich{--accent:var(--red);--glow:rgba(227,86,79,.48)}
.service-card.audio{--accent:var(--blue);--glow:rgba(78,163,255,.46)}
.service-card.help{--accent:var(--green);--glow:rgba(73,194,111,.45)}
.service-icon{display:grid;place-items:center;width:78px;height:78px;margin:0 0 23px;color:var(--accent)}
.service-icon img{width:62px;height:62px;display:block;object-fit:contain;filter:drop-shadow(0 0 10px color-mix(in srgb,var(--accent) 26%,transparent))}
.service-icon svg{width:62px;height:62px;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 10px color-mix(in srgb,var(--accent) 28%,transparent))}
.service-card h3{margin:0 0 12px;font-size:1.72rem;line-height:1.1;letter-spacing:-.025em;font-weight:520;color:#ffffff}
.service-card p{margin:0;color:var(--muted);font-size:1.02rem;line-height:1.62;font-weight:380}
.open-button{position:relative;z-index:1;margin-top:auto;width:100%;min-height:56px;display:flex;align-items:center;justify-content:center;gap:18px;border:1px solid rgba(255,255,255,.18);border-radius:17px;background:rgba(255,255,255,.045);color:var(--accent);font-size:1.02rem;font-weight:460;transition:background .2s ease,border-color .2s ease}
.service-card:hover .open-button{background:rgba(255,255,255,.065);border-color:rgba(255,255,255,.16)}
.open-button strong{font-size:1.45rem;line-height:1;font-weight:350}

.portal-footer{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;gap:18px;padding:25px 0 5px;border-top:1px solid rgba(255,255,255,.14);color:var(--soft);font-size:.94rem;font-weight:340}
.footer-item{display:flex;align-items:center;gap:9px}.footer-item:nth-child(2){justify-content:center}.footer-item:last-child{justify-content:flex-end}
.footer-item svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.footer-sep{opacity:.62}

@media (max-width:1100px){
  .portal{width:min(100% - 34px,1000px)}
  .hero{grid-template-columns:1fr minmax(280px,38%);padding-top:26px}
  .hero-art{min-height:320px}
  .service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .service-card{min-height:315px}
  .portal-footer{grid-template-columns:1fr 1fr}.footer-item:nth-child(2){justify-content:flex-end}.footer-item:last-child{grid-column:1/-1;justify-content:center}
}

@media (max-width:720px){
  .portal{width:min(100% - 24px,680px);padding-top:max(18px,env(safe-area-inset-top))}
  .hero{grid-template-columns:1fr;padding:10px 2px 24px;gap:10px}
  .hero h1{font-size:clamp(2.7rem,13vw,4.1rem)}
  .hero h2{font-size:clamp(1.85rem,8.7vw,2.7rem);margin-top:10px}
  .hero-rule{margin:22px 0 20px;width:96px}
  .hero p{font-size:1rem;line-height:1.58}.hero p br{display:none}
  .hero-art{min-height:220px;order:-1}.hero-art img{width:min(86vw,380px);opacity:.76}
  .service-grid{grid-template-columns:1fr;gap:12px;padding-top:2px}
  .service-card{min-height:0;padding:18px 16px 15px;display:grid;grid-template-columns:58px 1fr auto;grid-template-rows:auto auto;column-gap:14px;row-gap:2px;text-align:left;align-items:center;border-radius:20px}
  .service-icon{grid-column:1;grid-row:1/3;width:58px;height:58px;margin:0}.service-icon img,.service-icon svg{width:47px;height:47px}
  .service-card h3{grid-column:2;grid-row:1;margin:0;font-size:1.28rem;align-self:end}
  .service-card p{grid-column:2;grid-row:2;margin:3px 0 0;font-size:.88rem;line-height:1.38;align-self:start}.service-card p br{display:none}
  .open-button{grid-column:3;grid-row:1/3;width:44px;min-height:44px;height:44px;margin:0;border-radius:14px;font-size:0;gap:0}.open-button strong{font-size:1.5rem}
  .portal-footer{grid-template-columns:1fr;gap:9px;padding-top:18px;font-size:.83rem}.footer-item,.footer-item:nth-child(2),.footer-item:last-child{grid-column:auto;justify-content:flex-start}
}

@media (max-width:390px){
  .service-card{grid-template-columns:52px 1fr 42px;column-gap:11px}.service-icon{width:52px;height:52px}.service-icon img,.service-icon svg{width:43px;height:43px}
}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}


/* Theme mode ------------------------------------------------------------- */
.theme-toggle{position:absolute;top:max(18px,env(safe-area-inset-top));right:0;z-index:8;display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:8px 12px;border:1px solid var(--border);border-radius:14px;background:rgba(25,28,33,.72);color:var(--text);box-shadow:0 10px 28px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.05);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);cursor:pointer;transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease}
.theme-toggle:hover{transform:translateY(-1px);border-color:var(--border-hover)}
.theme-toggle-icon{width:20px;height:20px;display:grid;place-items:center}.theme-toggle svg{grid-area:1/1;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:none}
html[data-theme-mode="auto"] .theme-toggle .icon-auto,html[data-theme-mode="light"] .theme-toggle .icon-light,html[data-theme-mode="dark"] .theme-toggle .icon-dark{display:block}
.theme-toggle-label{font-size:.82rem;font-weight:600;letter-spacing:.01em}

html[data-theme="light"]{
  --bg-0:#f2f4f6;--bg-1:#e9edf1;--bg-2:#dfe4e9;
  --surface:rgba(255,255,255,.88);--surface-strong:rgba(255,255,255,.97);
  --border:rgba(25,31,38,.16);--border-hover:rgba(25,31,38,.28);
  --text:#12161b;--muted:#3e454e;--soft:#626b76;
  --shadow:0 20px 55px rgba(31,39,48,.12);
  color-scheme:light;
}
html[data-theme="dark"]{color-scheme:dark}
html[data-theme="light"] body{background:radial-gradient(circle at 12% 12%,rgba(78,163,255,.09),transparent 22rem),radial-gradient(circle at 85% 15%,rgba(227,86,79,.07),transparent 20rem),radial-gradient(circle at 75% 80%,rgba(73,194,111,.06),transparent 22rem),radial-gradient(circle at 48% 100%,rgba(241,200,78,.08),transparent 24rem),linear-gradient(180deg,#f7f8f9 0%,#eef1f4 46%,#e5e9ed 100%)}
html[data-theme="light"] .site-bg{background-image:linear-gradient(rgba(20,25,30,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(20,25,30,.045) 1px,transparent 1px)}
html[data-theme="light"] .site-bg::before,html[data-theme="light"] .site-bg::after{border-color:rgba(30,36,43,.08)}
html[data-theme="light"] .theme-toggle{background:rgba(255,255,255,.88);box-shadow:0 10px 28px rgba(31,39,48,.11),inset 0 1px rgba(255,255,255,.9)}
html[data-theme="light"] .hero h1{color:#101419;text-shadow:none}
html[data-theme="light"] .hero p{text-shadow:none}
html[data-theme="light"] .hero-art::before{background:radial-gradient(circle,rgba(255,255,255,.72),rgba(78,163,255,.07) 42%,transparent 72%)}
html[data-theme="light"] .hero-art img{opacity:.93;filter:drop-shadow(0 16px 30px rgba(31,39,48,.13)) brightness(1.03) contrast(1.03)}
html[data-theme="light"] .service-card{background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(232,236,241,.42)),var(--surface);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 16px 42px rgba(31,39,48,.10)}
html[data-theme="light"] .service-card:hover,html[data-theme="light"] .service-card:focus-visible{background:linear-gradient(180deg,#fff,rgba(242,245,248,.82)),var(--surface-strong);box-shadow:inset 0 1px 0 #fff,0 22px 50px rgba(31,39,48,.14)}
html[data-theme="light"] .service-card h3{color:#11161b}
html[data-theme="light"] .open-button{background:rgba(22,27,33,.035);border-color:rgba(25,31,38,.14)}
html[data-theme="light"] .service-card:hover .open-button{background:rgba(22,27,33,.055);border-color:rgba(25,31,38,.22)}
html[data-theme="light"] .portal-footer{border-top-color:rgba(25,31,38,.13)}
@media(max-width:720px){.theme-toggle{right:2px;top:max(12px,env(safe-area-inset-top));min-height:39px;padding:7px 10px}.theme-toggle-label{font-size:.76rem}}