/* heyFinley – Grund-Stylesheet (Prototyp) */
/* DSGVO: keine externen Requests, Schriften später self-hosted. */

:root{
  --bg:#f3f5f0;
  --card:#ffffff;
  --border:#e7eae3;
  --ink:#242a25;
  --muted:#8a918a;
  --green:#4f9068;          /* Akzent / Buttons / Logo */
  --green-strong:#3f7d59;
  --green-ink:#2f7a57;      /* Titel der Treffer */
  --green-soft:#e9f1ea;     /* Chips / Badges */
  --green-softer:#eef4ee;
  --radius:16px;
  --radius-lg:26px;
  --shadow:0 1px 2px rgba(30,40,32,.04), 0 8px 30px rgba(30,40,32,.05);
  font-synthesis:none;
}

*{box-sizing:border-box}
html,body{margin:0;overflow-x:hidden;max-width:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  padding-bottom:120px;           /* Platz für Bottom-Bar */
}

/* Kopfzeile */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 34px;
}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:20px;letter-spacing:-.01em}
.brand .logo{
  width:38px;height:38px;border-radius:11px;background:var(--accent,var(--green));
  color:#fff;display:grid;place-items:center;font-weight:800;font-size:18px;
}
.brand .lo{color:var(--ink)} .brand .hi{color:var(--accent,var(--green-strong))}
.topbar-center{flex:1;display:flex;justify-content:center;min-width:0}
.topbar-right{display:flex;align-items:center;gap:12px}
.userchip{
  background:rgba(0,0,0,.05);color:var(--accent,var(--green-strong));font-weight:700;font-size:14px;
  padding:9px 16px;border-radius:999px;white-space:nowrap;
}
.btn{
  border:0;cursor:pointer;font:inherit;font-weight:700;
  background:var(--accent,var(--green));color:#fff;border-radius:999px;padding:11px 22px;text-decoration:none;
}
.btn.ghost{background:var(--accent,var(--green));}

/* Header-Mitte: seiten-eigene Suche (z. B. PlaudR) */
.hsearch{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--border);
  border-radius:999px;padding:7px 8px 7px 16px;width:min(440px,100%);box-shadow:var(--shadow)}
.hsearch .ico{color:var(--muted);font-size:16px}
.hsearch input{border:0;outline:0;font:inherit;font-size:15px;background:transparent;flex:1;color:var(--ink)}
.hsearch input::placeholder{color:#aeb4ad}

/* Zentrale Spalte */
.wrap{max-width:820px;margin:0 auto;padding:0 24px}

.hero{text-align:center;padding:26px 0 4px}
.netzbadge{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--green-soft);color:var(--green-strong);
  padding:7px 15px;border-radius:999px;font-size:13px;font-weight:600;margin-bottom:22px;
}
.hero h1{
  font-size:56px;line-height:1.04;letter-spacing:-.025em;margin:0 0 16px;font-weight:800;color:var(--ink);
}
.hero p.sub{color:var(--muted);max-width:520px;margin:0 auto;font-size:17px}

/* Suchleiste */
.searchbar{
  display:flex;align-items:center;gap:10px;background:var(--card);
  border:1px solid var(--border);box-shadow:var(--shadow);
  border-radius:999px;padding:9px 9px 9px 22px;margin:30px 0 10px;
}
.searchbar .ico{color:var(--muted);font-size:18px}
.searchbar input{
  flex:1;border:0;outline:0;font:inherit;font-size:17px;background:transparent;color:var(--ink);
}
.searchbar input::placeholder{color:#aeb4ad}
.searchbar button{
  border:0;cursor:pointer;font:inherit;font-weight:700;color:#fff;background:var(--green);
  border-radius:999px;padding:12px 26px;
}

.result-count{color:var(--muted);font-size:13px;margin:14px 4px 10px}

/* Trefferkarten */
.card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);padding:22px 26px;margin-bottom:18px;text-decoration:none;color:inherit;display:block;
  transition:box-shadow .15s ease, transform .15s ease;
}
.card:hover{box-shadow:0 2px 6px rgba(30,40,32,.06),0 14px 40px rgba(30,40,32,.09);transform:translateY(-1px)}
.card .crumbrow{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px;margin-bottom:8px}
.card .badge{
  width:26px;height:26px;border-radius:999px;background:var(--green-soft);color:var(--green-strong);
  display:grid;place-items:center;font-weight:800;font-size:13px;flex:0 0 auto;
}
.card h2{margin:0 0 8px;font-size:23px;color:var(--green-ink);letter-spacing:-.01em}
.card p{margin:0 0 14px;color:#454b46;font-size:15px}
.chip{
  display:inline-block;background:var(--green-softer);color:var(--green-strong);
  padding:5px 13px;border-radius:999px;font-size:12.5px;font-weight:600;
}

/* Globaler Footer – volle Breite, ganz unten, Höhe = Panel-Höhe */
.sitefooter{
  position:fixed;left:0;right:0;bottom:0;width:100%;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:10px 26px;
  background:rgba(243,245,240,.92);backdrop-filter:blur(8px);
  border-top:1px solid var(--border);
}
.sitefooter .foot-left{color:var(--muted);font-size:13px;white-space:nowrap;flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis}
.sitefooter .foot-left .fl{color:var(--accent,var(--green-strong));font-weight:700}
.sitefooter .foot-right{color:var(--muted);font-size:13px;white-space:nowrap;flex:1 1 0;text-align:right}
.sitefooter .foot-center{flex:0 0 auto;display:flex;justify-content:center}

/* Panel (Werkzeugleiste) – bestimmt die Footer-Höhe */
.panel{
  display:flex;align-items:center;gap:10px;
  background:#fff;border:1px solid var(--border);box-shadow:0 6px 24px rgba(30,40,32,.10);
  border-radius:999px;padding:8px 10px;
}
.panel .pbrand{display:flex;align-items:center;gap:9px;font-weight:800;padding:6px 12px;text-decoration:none}
/* Panel = Such-Widget der Suchmaschine -> IMMER heyFinley-grün, unabhängig von --accent der Seite */
.panel .pbrand .logo{width:26px;height:26px;border-radius:8px;background:var(--green);color:#fff;display:grid;place-items:center;font-size:13px}
.panel .pbrand .lo{color:var(--ink)} .panel .pbrand .hi{color:var(--green-strong)}
.panel .tab{
  border:0;cursor:pointer;font-family:inherit;text-decoration:none;color:#3d443e;font-weight:600;font-size:14px;
  background:var(--green-softer);border-radius:999px;padding:9px 16px;display:flex;align-items:center;gap:8px;line-height:1;
}
.panel .tab:hover{background:var(--green-soft)}

/* ===== Slide-Outs (Panel-Fenster, fahren von unten nach oben aus) ===== */
.sheet-backdrop{position:fixed;inset:0;background:rgba(20,28,22,.30);opacity:0;pointer-events:none;
  transition:opacity .2s ease;z-index:80}
.sheet-backdrop.show{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:90;display:flex;justify-content:center;
  transform:translateY(115%);transition:transform .30s cubic-bezier(.22,.61,.36,1);pointer-events:none}
.sheet.open{transform:translateY(0)}
.sheet-card{
  pointer-events:auto;  /* nur die Karte fängt Klicks – daneben (links/rechts/oben) schließt */
  width:min(700px,94vw);margin-bottom:88px;max-height:70vh;display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid var(--border);border-radius:22px;
  box-shadow:0 -8px 20px rgba(20,28,22,.06),0 22px 60px rgba(20,28,22,.20);
}
.sheet-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px 12px}
.sheet-head h3{margin:0;font-size:18px;color:var(--ink)}
.sheet-close{border:0;background:var(--green-softer);color:#3d443e;cursor:pointer;font-size:20px;line-height:1;
  width:34px;height:34px;border-radius:999px}
.sheet-close:hover{background:var(--green-soft)}
.sheet-body{padding:6px 22px 22px;overflow:auto}
.sheet-hint{color:var(--muted);font-size:14px;margin:0 0 12px}
.sheet .searchbar.sheet-search{margin:2px 0 14px}
.sheet-results{display:flex;flex-direction:column;gap:10px}
@keyframes sresIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
.sres{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;
  border:1px solid var(--border);border-radius:16px;padding:12px 14px;
  animation:sresIn .28s ease both}
@media (prefers-reduced-motion: reduce){ .sres{animation:none} }
.sres:hover{background:var(--green-softer)}
.sres-badge{width:26px;height:26px;flex:0 0 auto;border-radius:999px;background:var(--green-soft);
  color:var(--green-strong);display:grid;place-items:center;font-weight:800;font-size:13px}
.sres-main{display:flex;flex-direction:column;min-width:0;flex:1}
.sres-crumb{color:var(--muted);font-size:12px}
.sres-title{color:var(--green-ink);font-weight:700;font-size:16px}
.sres-desc{color:#565c56;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notizen{width:100%;min-height:220px;resize:vertical;border:1px solid var(--border);border-radius:14px;
  padding:14px;font:inherit;font-size:15px;color:var(--ink);outline:0;background:#fcfdfb}
.notizen:focus{border-color:var(--green)}
.sheet-foot{display:flex;justify-content:flex-end;margin-top:8px;min-height:18px}
.muted{color:var(--muted);font-size:13px}
.sheet-links{display:flex;gap:18px;margin-top:14px}
.sheet-links a{color:var(--green-strong);font-weight:700;text-decoration:none}
.kontakt{display:flex;align-items:center;gap:14px;border:1px solid var(--border);border-radius:16px;padding:14px}
.kontakt-badge{width:40px;height:40px;flex:0 0 auto;border-radius:12px;background:var(--green-soft);
  color:var(--green-strong);display:grid;place-items:center;font-weight:800;font-size:18px}
.kontakt-name{font-weight:700;color:var(--ink)}

/* App-Platzhalter (Seite noch im Bau) */
.placeholder{max-width:640px;margin:60px auto;text-align:center;background:var(--card);
  border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:48px 40px}
.placeholder .badge{width:54px;height:54px;border-radius:16px;background:var(--green-soft);color:var(--green-strong);
  display:grid;place-items:center;font-weight:800;font-size:24px;margin:0 auto 18px}
.placeholder h1{margin:0 0 8px;color:var(--green-ink)}
.placeholder p{color:var(--muted);margin:0 0 22px}
.placeholder a{color:var(--green-strong);font-weight:700;text-decoration:none}

/* ===================== App: PlaudR (profil-zentriert, koral) ===================== */
.plaudr{--pl:#bf6a4d;--pl-ink:#a2543a;--pl-soft:#f6ece6;--pl-line:#eee3dc}
.pl-wrap{max-width:620px;margin:0 auto;padding:22px 18px 0}
.pl-card{background:#fff;border:1px solid var(--pl-line);border-radius:20px;box-shadow:var(--shadow);padding:20px 22px;margin-bottom:16px}

.pl-av{width:44px;height:44px;flex:0 0 auto;border-radius:999px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:16px;text-decoration:none}
.pl-av.xl{width:74px;height:74px;font-size:27px}
.pl-name{font-weight:800;color:var(--ink);text-decoration:none}
.pl-sub{color:var(--muted);font-size:13px}
.pl-mention{color:var(--pl-ink);font-weight:600}
.pl-h2{font-size:14px;color:var(--muted);margin:2px 2px 12px;text-transform:uppercase;letter-spacing:.05em}
.pl-empty{color:var(--muted)}

/* Header-Extra: Adminansicht */
.pl-admin{background:var(--pl-soft);color:var(--pl-ink);font-weight:700;font-size:13px;padding:8px 14px;border-radius:999px;white-space:nowrap}

/* Profilkopf */
.pl-profile-head{display:flex;gap:18px;align-items:flex-start}
.pl-pinfo{min-width:0;flex:1}
.pl-pinfo h1{margin:0 0 2px;font-size:24px;color:var(--ink)}
.pl-bio{margin:12px 0 10px;color:#2b2f2c}
.pl-facts{display:flex;flex-wrap:wrap;gap:4px 14px;color:var(--muted);font-size:13.5px}
.pl-stats{display:flex;gap:26px;margin-top:14px;padding-top:14px;border-top:1px solid var(--pl-line);color:var(--muted);font-size:14px}
.pl-stats b{color:var(--ink)}

/* Tabs Beiträge | Nachrichten */
.pl-tabs{display:flex;background:#fff;border:1px solid var(--pl-line);border-radius:16px;box-shadow:var(--shadow);padding:6px;margin-bottom:16px}
.pl-tabs a{flex:1;text-align:center;text-decoration:none;color:#6b7280;font-weight:700;padding:12px;border-radius:12px}
.pl-tabs a.on{background:var(--pl-soft);color:var(--pl-ink)}

/* Beiträge */
.pl-post-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.pl-meta{display:flex;flex-direction:column;min-width:0}
.pl-text{margin:2px 0 12px;color:#2b2f2c;font-size:15.5px;line-height:1.55}
.pl-media{border-radius:14px;overflow:hidden;border:1px solid var(--pl-line);margin-bottom:12px}
.pl-media img{display:block;width:100%;height:auto;max-height:440px;object-fit:cover}
.pl-likes{color:var(--muted);font-size:14px;font-weight:600}

/* Profil-Suche (Ergebnisliste) */
.pl-personrow{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--pl-line);border-radius:16px;box-shadow:var(--shadow);padding:12px 16px;margin-bottom:10px;text-decoration:none}
.pl-personrow:hover{background:var(--pl-soft)}
.pl-personrow .pl-sub{display:block}

/* Nachrichten: Thread-Liste + Konversation */
.pl-thread{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.pl-thmeta{display:flex;flex-direction:column;min-width:0;flex:1}
.pl-thlast{color:#4b5563;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-thdate{color:var(--muted);font-size:12.5px;white-space:nowrap}
.pl-conv{margin:-6px 2px 18px;display:flex;flex-direction:column;gap:6px}
.pl-msg{display:flex;flex-direction:column;max-width:78%}
.pl-msg.their{align-self:flex-start;align-items:flex-start}
.pl-msg.mine{align-self:flex-end;align-items:flex-end}
.pl-bubble2{padding:9px 14px;border-radius:16px;font-size:14.5px}
.pl-msg.their .pl-bubble2{background:#f1f0ee;color:#2b2f2c;border-bottom-left-radius:5px}
.pl-msg.mine .pl-bubble2{background:var(--pl);color:#fff;border-bottom-right-radius:5px}
.pl-mtime{color:var(--muted);font-size:11.5px;margin:2px 4px}

/* ===================== App: Dein Tagesblatt (Zeitung, navy/serif) ===================== */
.tb{--tb:#1f2d3d;--tb-soft:#eef1f4;--tb-line:#e5e8ec}
.tb-serif{font-family:Georgia,"Times New Roman",serif}
.tb-wrap{max-width:1080px;margin:0 auto;padding:20px 24px 0}
.tb-meta{display:flex;gap:12px;align-items:center;color:var(--muted);font-size:13px;padding:4px 0 22px}
.tb-meta .dot{opacity:.5}

/* Header-Navigation (Ressorts) */
.tb-nav{display:flex;gap:20px;flex-wrap:wrap;justify-content:center}
.tb-nav a{color:#3a4453;font-weight:600;font-size:14.5px;text-decoration:none}
.tb-nav a.on{color:var(--tb);font-weight:800}
.tb-nav a:hover{color:var(--tb)}
.tb-abo{font-size:14px;padding:10px 18px}

.tb-top{display:grid;grid-template-columns:1.7fr 1fr;gap:40px;padding-bottom:26px;border-bottom:1px solid var(--tb-line)}
.tb-lead-img{border-radius:6px;overflow:hidden;margin-bottom:18px;aspect-ratio:16/10}
.tb-lead-img img,.tb-thumb img,.tb-card-img img,.tb-art-img img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.tb-kickline{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.tb-kicker{color:var(--tb);font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.tb-min,.tb-time{color:var(--muted);font-size:12.5px}
.tb-plus{background:var(--tb);color:#fff;font-size:10px;font-weight:800;padding:2px 5px;border-radius:3px;vertical-align:middle;margin-left:6px}
.tb-lead h1{font-size:44px;line-height:1.06;margin:0 0 16px;letter-spacing:-.01em}
.tb-lead h1 a{color:var(--ink);text-decoration:none}
.tb-teaser{color:#33393f;font-size:17px;line-height:1.5;margin:0 0 16px}
.tb-byline{color:var(--muted);font-size:13.5px}

.tb-side{display:flex;flex-direction:column}
.tb-side-item{display:flex;gap:14px;text-decoration:none;color:inherit;padding:16px 0;border-bottom:1px solid var(--tb-line);align-items:flex-start}
.tb-side-item:first-child{padding-top:0}
.tb-side-text{flex:1;min-width:0}
.tb-side-item h3{font-size:19px;line-height:1.16;margin:6px 0 8px;color:var(--ink)}
.tb-thumb{width:92px;height:70px;flex:0 0 auto;border-radius:5px;overflow:hidden}
.tb-ml{margin-top:22px}
.tb-ml-head{color:var(--muted);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.tb-ml-item{display:flex;gap:14px;text-decoration:none;color:var(--ink);padding:12px 0;border-top:1px solid var(--tb-line);align-items:baseline}
.tb-ml-num{color:#c3c8cf;font-size:22px;font-weight:800;font-family:Georgia,serif;min-width:20px}
.tb-ml-item .tb-serif{font-size:16px;line-height:1.2}

.tb-sec-head{display:flex;justify-content:space-between;align-items:baseline;margin:26px 0 16px}
.tb-sec-head span{color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:13px}
.tb-sec-head a{color:var(--tb);font-weight:700;text-decoration:none;font-size:14px}
.tb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;padding-bottom:40px}
.tb-card{text-decoration:none;color:inherit}
.tb-card-img{aspect-ratio:16/10;border-radius:6px;overflow:hidden;margin-bottom:12px}
.tb-card h3{font-size:20px;line-height:1.16;margin:8px 0 8px;color:var(--ink)}

.tb-ressort-title{font-size:34px;margin:6px 0 22px;color:var(--ink)}
.tb-article{max-width:720px;margin:0 auto;padding-bottom:40px}
.tb-back{color:var(--tb);font-weight:700;text-decoration:none;font-size:14px;display:inline-block;margin:0 0 14px}
.tb-art-title{font-size:40px;line-height:1.08;margin:10px 0 12px;color:var(--ink)}
.tb-art-img{border-radius:6px;overflow:hidden;margin:18px 0 22px;aspect-ratio:16/9}
.tb-lead-para{font-size:19px;line-height:1.55;color:#2b2f2c;font-weight:600;margin:0 0 16px}
.tb-para{font-size:17px;line-height:1.62;color:#2b2f2c;margin:0 0 16px}
.tb-paywall{background:var(--tb-soft);color:var(--tb);border-radius:10px;padding:14px 16px;font-weight:600;font-size:14px}
.tb-empty{color:var(--muted)}

/* ===================== Mobile ===================== */
@media (max-width: 640px){
  body{padding-bottom:96px}

  /* Header: kompakter, kleinere Schrift */
  .topbar{padding:12px 14px;gap:10px}
  .topbar-center{display:none}                 /* Seiten-Suche im Header auf Mobile ausblenden */
  .brand{font-size:0}                          /* Wortmarke ausblenden … */
  .brand > span:last-child{display:none}        /* … es bleibt nur das F-Quadrat */
  .brand .logo{width:34px;height:34px;font-size:16px}
  .btn{padding:9px 14px;font-size:14px}
  .userchip{padding:7px 10px;font-size:12.5px;max-width:38vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* Hero / Suche kleiner */
  .hero h1{font-size:32px;line-height:1.08}
  .hero p.sub{font-size:14px}
  .netzbadge{font-size:12px}
  .searchbar{padding:7px 7px 7px 16px}
  .searchbar input{font-size:15px}
  .searchbar button{padding:10px 18px}
  .card h2{font-size:19px}
  .card p{font-size:14px}
  .wrap{padding:0 16px}
  .placeholder{max-width:100%;margin:36px 0;padding:34px 22px}
  /* Tagesblatt mobil: Spalten stapeln */
  .tb-wrap{padding:16px 16px 0}
  .tb-top{grid-template-columns:1fr;gap:24px}
  .tb-grid{grid-template-columns:1fr;gap:22px}
  .tb-lead h1{font-size:30px}
  .tb-art-title{font-size:27px}
  .tb-ressort-title{font-size:27px}

  /* Footer: Panel maximal breit, Seitentexte weg */
  .sitefooter{padding:8px 8px;gap:0;bottom:8px;left:8px;right:8px;width:auto;border-radius:999px}
  .sitefooter .foot-left,.sitefooter .foot-right{display:none}
  .sitefooter .foot-center{flex:1;width:100%}
  .panel{width:100%;justify-content:space-between;gap:6px;padding:6px 6px}
  .panel .pbrand{padding:6px 6px}
  .panel .pbrand > span:last-child{display:none}   /* Panel-Logo nur F */
  .panel .tab{padding:9px 6px;font-size:12.5px;font-weight:700;gap:0;justify-content:center;flex:1;white-space:nowrap}
  .panel .tab .ti{display:none}                     /* Icons fallen weg */
}