/* ============================================================================ installateur.at — Referenzprojekte („Ausgeführte Projekte", ab Premium) Prefix .ipr-. Erbt Farben und Kartenoptik von profile-rework.css (:root --isp-*), damit Profil- und Projektseite EINE Seite bleiben und nicht zwei Gestaltungen nebeneinander. Flache Flächen, keine Verläufe (Design-Vorgabe). Geladen von functions/referenzprojekte.php: Profilseite, Projektseite, Editor. ========================================================================== */ /* ── Kartengitter (Profilseite + „Weitere Projekte") ────────────────────── */ .ipr-grid{display:grid;gap:14px;} .ipr-grid[data-cols="3"]{grid-template-columns:repeat(3,1fr);} .ipr-grid[data-cols="2"]{grid-template-columns:repeat(2,1fr);} .ipr-card{display:block;border:1px solid var(--isp-line-2,#dbe3ec);border-radius:var(--isp-radius-sm,11px); overflow:hidden;background:#fff;text-decoration:none;color:inherit;transition:border-color .15s ease;} .ipr-card:hover,.ipr-card:focus-visible{border-color:var(--isp-cyan,#36afd8);text-decoration:none;} .ipr-card-img{display:block;aspect-ratio:5/3;background:#e7eef5;overflow:hidden;} .ipr-card-img img{width:100%;height:100%;object-fit:cover;display:block;} /* Projekt ohne Foto: ruhige Fläche statt kaputtem Bildrahmen. */ .ipr-card-img.is-empty{background:repeating-linear-gradient(45deg,#eef3f8,#eef3f8 10px,#e7eef5 10px,#e7eef5 20px);} .ipr-card-body{display:block;padding:11px 13px 14px;} .ipr-card-t{display:block;font-weight:700;font-size:15px;line-height:1.3;color:var(--isp-navy,#1e456c);margin-bottom:5px;} .ipr-card-m{display:block;font-size:12.5px;color:var(--isp-muted,#5f6d82);} /* ── Projekt-Einzelseite ────────────────────────────────────────────────── */ /* 🛑 width:100% ist Pflicht, kein Schmuck: Astras `#content > .ast-container` ist ein Flex-Container mit justify-content:flex-start. Ein Top-Level-Wrapper ohne eigene Breite schrumpft dort auf Inhaltsbreite und klebt auf breiten Monitoren links. Hier gemessen: 1200 px Wrapper in einem 1440 px Fenster, das Navy-Band endete mitten im Bild. Gilt für JEDEN neuen Wrapper in Astra-Content (siehe Memory [[astra-flex-breitbild]]). */ .ipr-page{background:var(--isp-bg,#f4f7fa);width:100%;} .ipr-band{background:var(--isp-navy,#1e456c);padding:18px 0 66px;} .ipr-body{padding-bottom:56px;} .ipr-card-main{margin-top:-54px;} .ipr-kicker{display:block;font-size:12.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase; color:var(--isp-cyan-600,#1c7291);margin-bottom:6px;} .installateur-projekt .ipr-h1{font-size:28px;line-height:1.2;font-weight:800;color:var(--isp-navy,#1e456c);margin:0 0 8px;} .ipr-sub{font-size:14.5px;color:var(--isp-muted,#5f6d82);margin:0 0 18px;} .ipr-sub a{color:var(--isp-cyan-600,#1c7291);} /* Bühne: erstes Foto groß, die folgenden als Streifen daneben. Feste Zeilenhöhe statt max-height am Bild: sonst endet die große Spalte höher als die kleine, und die Bühne steht schief. */ .ipr-stage{display:grid;grid-template-columns:2fr 1fr;grid-auto-rows:minmax(0,380px);gap:8px;margin-bottom:18px;} .ipr-stage-main,.ipr-stage-main a{display:block;height:100%;} .ipr-stage-main img{width:100%;height:100%;object-fit:cover;display:block;border-radius:8px;background:#e7eef5;} .ipr-stage-rest{display:grid;grid-template-rows:repeat(2,1fr);gap:8px;height:100%;min-height:0;} .ipr-stage-rest a{display:block;height:100%;min-height:0;} .ipr-stage-rest img{width:100%;height:100%;object-fit:cover;display:block;border-radius:8px;background:#e7eef5;} .ipr-more{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:18px;} .ipr-more img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:8px;background:#e7eef5;} .ipr-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px; border-top:1px solid var(--isp-line-2,#dbe3ec);border-bottom:1px solid var(--isp-line-2,#dbe3ec); padding:14px 0;margin:16px 0;} .ipr-facts span{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--isp-muted,#5f6d82);} .ipr-facts b{font-size:15px;color:var(--isp-navy,#1e456c);} .ipr-text{color:var(--isp-ink,#1d2430);font-size:16px;line-height:1.65;} .ipr-text p{margin:0 0 14px;} .ipr-text p:last-child{margin-bottom:0;} .ipr-disclaimer{font-size:12.5px;color:var(--isp-muted,#5f6d82);margin-top:18px; border-top:1px solid var(--isp-line-2,#dbe3ec);padding-top:12px;} /* Betriebs-Zeile mit dem eigentlichen Zweck der Seite: der Anfrage. */ .ipr-byline{display:flex;align-items:center;gap:14px;flex-wrap:wrap; background:#f7fafc;border:1px solid var(--isp-line-2,#dbe3ec);border-radius:var(--isp-radius-sm,11px); padding:14px 16px;margin-top:20px;} .ipr-byline img{width:56px;height:56px;border-radius:8px;object-fit:cover;flex:0 0 auto;background:#e7eef5;} .ipr-byline-tx{flex:1;min-width:180px;} .ipr-byline-n{font-weight:700;color:var(--isp-navy,#1e456c);} .ipr-byline-s{font-size:13.5px;color:var(--isp-muted,#5f6d82);} .ipr-byline-s a{color:var(--isp-cyan-600,#1c7291);} .ipr-vorschau{background:#fff8e1;border:1px solid #f0d98a;border-radius:8px;padding:10px 14px; font-size:14px;color:#6b5300;margin-bottom:14px;} /* ── Editor-Teil (/mein-profil/) ─────────────────────────────────────────── */ .pe-proj-list{display:flex;flex-direction:column;gap:10px;margin-bottom:14px;} .pe-proj-row{display:flex;align-items:center;gap:12px;border:1px solid var(--isp-line-2,#dbe3ec); border-radius:var(--isp-radius-sm,11px);background:#fff;padding:10px 12px;} .pe-proj-row .thumb{width:74px;height:52px;border-radius:7px;object-fit:cover;background:#e7eef5;flex:0 0 auto;} .pe-proj-row .thumb.is-empty{display:block;} .pe-proj-tx{flex:1;min-width:0;} .pe-proj-tx .t{font-weight:700;color:var(--isp-navy,#1e456c);font-size:15px;} .pe-proj-tx .m{font-size:12.5px;color:var(--isp-muted,#5f6d82);} .pe-proj-tx .u{font-size:11.5px;color:var(--isp-cyan-600,#1c7291);word-break:break-all;} .pe-proj-badge{font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:6px;white-space:nowrap;} .pe-proj-badge.is-draft{background:#f1f5f9;color:#475569;border:1px solid #cbd5e1;} .pe-proj-badge.is-live{background:#e8f5ec;color:#15803d;border:1px solid #b6dfc2;} .pe-proj-acts{display:flex;gap:8px;flex:0 0 auto;} .pe-proj-form{border:1px solid var(--isp-line-2,#dbe3ec);border-radius:var(--isp-radius-sm,11px); background:#fbfdfe;padding:16px;margin-top:6px;} .pe-proj-form label{display:block;font-size:13px;font-weight:700;color:var(--isp-navy,#1e456c);margin-bottom:4px;} .pe-proj-form input[type=text],.pe-proj-form input[type=month],.pe-proj-form select,.pe-proj-form textarea{ width:100%;font:inherit;font-size:15px;padding:9px 11px;border:1px solid var(--isp-line,#ccd6e2); border-radius:8px;background:#fff;color:var(--isp-ink,#1d2430);margin-bottom:12px;} .pe-proj-form textarea{min-height:170px;resize:vertical;} .pe-proj-cols{display:grid;grid-template-columns:repeat(2,1fr);gap:0 14px;} .pe-proj-hint{font-size:12.5px;color:var(--isp-muted,#5f6d82);margin:-6px 0 12px;} .pe-proj-sub{font-size:13px;border-radius:8px;padding:9px 12px;margin-bottom:12px;} .pe-proj-sub.is-ok{background:#e8f5ec;color:#166534;border:1px solid #b6dfc2;} .pe-proj-sub.is-todo{background:#fff8e1;color:#6b5300;border:1px solid #f0d98a;} .pe-proj-fotos{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px;} .pe-proj-foto{position:relative;aspect-ratio:4/3;border-radius:8px;overflow:hidden;background:#e7eef5;} .pe-proj-foto img{width:100%;height:100%;object-fit:cover;display:block;} /* 🛑 box-sizing + padding:0 gehören dazu: Astra stylt JEDES