Änderungen von Dokument Otto Kähler

Zusammenfassung

• Seiteneigenschaften (1 geändert, 0 hinzugefügt, 0 gelöscht)

Details

Seiteneigenschaften

Inhalt

...	...	@@ -1,1 +1,233 @@
1		-test
	1	+{{html clean="false"}}
	2	+<style>
	3	+#document-title { display:none; }
	4	+.ok { max-width:980px; margin:0 auto; color:#3a3530; line-height:1.65; font-size:1.02em; }
	5	+.ok * { box-sizing:border-box; }
	6	+.ok h2 { font-family:Georgia,"Times New Roman",serif; font-weight:normal; font-size:2em; line-height:1.2; color:#1f2d4a; border:0; padding:0; margin:0 0 18px; }
	7	+.ok p { margin:0 0 14px; }
	8	+.ok-section { padding:60px 0; }
	9	+.ok-kicker { font-size:.76em; letter-spacing:.18em; text-transform:uppercase; color:#8a7f70; margin-bottom:10px; }
	10	+.ok-lead { font-size:1.1em; max-width:660px; }
	11	+.ok-band { background:#f6f1e8; border-radius:12px; padding:52px 40px; }
	12	+
	13	+.ok-hero { text-align:center; padding:60px 16px 30px; }
	14	+.ok-year { font-family:Georgia,"Times New Roman",serif; font-size:clamp(5.5rem,20vw,12rem); line-height:.9; color:#1D3F8F; letter-spacing:-.02em; }
	15	+.ok-hero-line { font-family:Georgia,"Times New Roman",serif; font-size:clamp(1.2rem,3.2vw,1.65rem); color:#4a4239; margin-top:22px; }
	16	+.ok-rule { width:60px; height:2px; background:#c9b99a; margin:30px auto 0; }
	17	+
	18	+.ok-portrait { display:flex; flex-wrap:wrap; align-items:center; gap:40px; padding:30px 0 50px; }
	19	+.ok-portrait-img { flex:1 1 400px; }
	20	+.ok-portrait-img img { width:100%; height:auto; display:block; }
	21	+.ok-portrait-text { flex:1 1 280px; }
	22	+.ok-name { font-family:Georgia,"Times New Roman",serif; font-size:2.3em; letter-spacing:.08em; text-transform:uppercase; color:#1f2d4a; line-height:1.1; }
	23	+.ok-role { font-family:Georgia,"Times New Roman",serif; font-style:italic; font-size:1.35em; color:#1D3F8F; margin:10px 0 6px; }
	24	+.ok-years { color:#8a7f70; font-size:.95em; }
	25	+.ok-quote { border-left:3px solid #c9b99a; padding-left:18px; margin-top:24px; color:#4a4239; font-size:1.05em; }
	26	+
	27	+.ok-photos { display:flex; flex-wrap:wrap; justify-content:center; gap:26px; margin-top:40px; }
	28	+.ok-photo { flex:0 1 290px; margin:0; background:#fff; padding:10px 10px 12px; box-shadow:0 3px 16px rgba(40,30,20,.14); }
	29	+.ok-photo img { width:100%; height:auto; display:block; filter:sepia(.12); }
	30	+.ok-photo figcaption { font-size:.8em; font-style:italic; color:#7a7064; margin-top:8px; text-align:center; }
	31	+.ok-photo:nth-child(1) { transform:rotate(-1.5deg); }
	32	+.ok-photo:nth-child(2) { transform:translateY(16px) rotate(1deg); }
	33	+.ok-photo:nth-child(3) { transform:rotate(-.6deg); }
	34	+
	35	+.ok-count { display:flex; flex-wrap:wrap; align-items:center; gap:36px; }
	36	+.ok-count-num { flex:0 0 auto; font-family:Georgia,"Times New Roman",serif; color:#1D3F8F; line-height:1; }
	37	+.ok-count-pre { font-size:1.4em; color:#8a7f70; }
	38	+.ok-count-big { display:block; font-size:clamp(3.8rem,11vw,6.5rem); }
	39	+.ok-count-unit { display:block; font-size:1.5em; color:#4a4239; margin-top:6px; }
	40	+.ok-count-text { flex:1 1 300px; }
	41	+
	42	+.ok-browser { max-width:620px; margin:34px auto 0; border:1px solid #ddd3c3; border-radius:10px; overflow:hidden; background:#fff; box-shadow:0 8px 28px rgba(40,30,20,.10); }
	43	+.ok-browser-bar { background:#eee7db; padding:10px 14px; display:flex; align-items:center; gap:7px; }
	44	+.ok-dot { width:10px; height:10px; border-radius:50%; background:#cbbfae; flex:0 0 auto; }
	45	+.ok-url { flex:1; background:#fff; border-radius:5px; padding:4px 12px; margin-left:8px; font-family:Menlo,Consolas,monospace; font-size:.85em; color:#6b635a; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
	46	+.ok-browser-body { padding:34px 30px 36px; text-align:center; }
	47	+.ok-stamp { display:inline-block; border:1.5px solid #b08d57; color:#8a6a3a; font-size:.7em; letter-spacing:.18em; text-transform:uppercase; padding:4px 10px; border-radius:3px; margin-bottom:16px; }
	48	+.ok-browser-title { font-family:Georgia,"Times New Roman",serif; font-size:1.9em; color:#1f2d4a; margin-bottom:6px; }
	49	+.ok-browser-sub { color:#6b635a; margin-bottom:24px; }
	50	+
	51	+.ok-btn { display:inline-block; padding:12px 24px; border-radius:6px; background:#1D3F8F; color:#fff !important; text-decoration:none !important; font-weight:600; border:1.5px solid #1D3F8F; transition:background .15s ease; }
	52	+.ok-btn:hover { background:#152f6b; }
	53	+.ok-btn-ghost { background:transparent; color:#1D3F8F !important; }
	54	+.ok-btn-ghost:hover { background:#eef1f8; }
	55	+
	56	+.ok-tl { border-left:2px solid #d9cfbf; margin:30px 0 0 8px; padding-left:30px; max-width:660px; }
	57	+.ok-tl-item { position:relative; margin-bottom:28px; }
	58	+.ok-tl-item:last-child { margin-bottom:0; }
	59	+.ok-tl-item::before { content:''; position:absolute; left:-38px; top:7px; width:12px; height:12px; border-radius:50%; background:#fff; border:2px solid #1D3F8F; }
	60	+.ok-tl-now::before { background:#1D3F8F; }
	61	+.ok-tl-year { font-family:Georgia,"Times New Roman",serif; font-size:1.45em; color:#1D3F8F; line-height:1.2; }
	62	+.ok-tl-text { color:#4a4239; }
	63	+
	64	+.ok-compare { display:flex; align-items:stretch; gap:20px; margin-top:34px; }
	65	+.ok-side { flex:1; background:#fff; border:1px solid #e6dccb; border-radius:10px; padding:30px 24px; text-align:center; }
	66	+.ok-side-name { font-family:Georgia,"Times New Roman",serif; font-size:1.55em; color:#1f2d4a; margin:6px 0 4px; }
	67	+.ok-side-desc { color:#6b635a; font-size:.95em; }
	68	+.ok-arrow { flex:0 0 auto; align-self:center; font-size:2em; color:#b08d57; }
	69	+.ok-slogan { font-family:Georgia,"Times New Roman",serif; text-align:center; font-size:clamp(1.5rem,4vw,2.2rem); color:#1f2d4a; margin:40px 0 20px; }
	70	+.ok-center { max-width:640px; margin:0 auto; text-align:center; }
	71	+
	72	+.ok-thanks { text-align:center; padding:80px 16px 30px; }
	73	+.ok-thanks-img { width:150px; height:150px; border-radius:50%; overflow:hidden; margin:0 auto 28px; box-shadow:0 4px 18px rgba(40,30,20,.12); }
	74	+.ok-thanks-img img { width:100%; height:100%; object-fit:cover; object-position:50% 32%; display:block; }
	75	+.ok-thanks-title { font-family:Georgia,"Times New Roman",serif; font-size:clamp(2.2rem,6vw,3rem); color:#1f2d4a; margin-bottom:24px; }
	76	+.ok-thanks-text { max-width:580px; margin:0 auto; font-size:1.08em; }
	77	+.ok-sign { margin-top:26px; font-style:italic; color:#8a7f70; }
	78	+
	79	+.ok-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; padding:30px 0 70px; }
	80	+
	81	+@media (max-width:700px) {
	82	+ .ok-section { padding:44px 0; }
	83	+ .ok-band { padding:36px 20px; }
	84	+ .ok-portrait { gap:24px; }
	85	+ .ok-name { font-size:1.8em; }
	86	+ .ok-photo, .ok-photo:nth-child(1), .ok-photo:nth-child(2), .ok-photo:nth-child(3) { transform:none; flex-basis:100%; }
	87	+ .ok-compare { flex-direction:column; }
	88	+ .ok-arrow { transform:rotate(90deg); }
	89	+ .ok-browser-body { padding:26px 18px 28px; }
	90	+}
	91	+</style>
	92	+
	93	+<div class="ok">
	94	+
	95	+ <div class="ok-hero">
	96	+ <div class="ok-year">1976</div>
	97	+ <div class="ok-hero-line">Als unsere Schule begann, begann auch ihre Chronik.</div>
	98	+ <div class="ok-rule"></div>
	99	+ </div>
	100	+
	101	+ <div class="ok-portrait">
	102	+ <div class="ok-portrait-img">
	103	+ <img src="/xwiki/bin/download/schulchronik/WebHome/otto-kaehler.PNG" alt="Otto Kähler – Illustration" />
	104	+ </div>
	105	+ <div class="ok-portrait-text">
	106	+ <div class="ok-name">Otto Kähler</div>
	107	+ <div class="ok-role">Der Chronist unserer Schule</div>
	108	+ <div class="ok-years">1976–2004 an der KGS Stuhr-Brinkum</div>
	109	+ <div class="ok-quote">Was wir heute über 50 Jahre KGS wissen, hat er zu einem großen Teil festgehalten.</div>
	110	+ </div>
	111	+ </div>
	112	+
	113	+ <div class="ok-section">
	114	+ <div class="ok-kicker">Geschichte festhalten</div>
	115	+ <h2>Fotografiert, gesammelt, aufgeschrieben</h2>
	116	+ <p class="ok-lead">Otto Kähler kam 1976 mit der Gründung an die KGS und war hier unter anderem stellvertretender Schulleiter. Neben seiner Arbeit an der Schule hat er über Jahrzehnte ihr Leben dokumentiert.</p>
	117	+ <p class="ok-lead">Er fotografierte den Schulalltag, Kolleginnen und Kollegen, Schülerinnen und Schüler, Veranstaltungen und besondere Ereignisse. Er hielt fest, wie Gebäude entstanden und sich veränderten. Und er sammelte Informationen und Bilder, damit nichts davon verloren ging.</p>
	118	+
	119	+ <div class="ok-photos">
	120	+ <figure class="ok-photo">
	121	+ <img src="/xwiki/bin/download/schulchronik/ottokaehler/WebHome/HISTORISCHES_BILD_1" alt="Historisches Foto aus der Schulchronik" onerror="this.parentNode.style.display='none'" />
	122	+ <figcaption>Aus der Chronik von Otto Kähler</figcaption>
	123	+ </figure>
	124	+ <figure class="ok-photo">
	125	+ <img src="/xwiki/bin/download/schulchronik/ottokaehler/WebHome/HISTORISCHES_BILD_2" alt="Historisches Foto aus der Schulchronik" onerror="this.parentNode.style.display='none'" />
	126	+ <figcaption>Aus der Chronik von Otto Kähler</figcaption>
	127	+ </figure>
	128	+ <figure class="ok-photo">
	129	+ <img src="/xwiki/bin/download/schulchronik/ottokaehler/WebHome/HISTORISCHES_BILD_3" alt="Historisches Foto aus der Schulchronik" onerror="this.parentNode.style.display='none'" />
	130	+ <figcaption>Aus der Chronik von Otto Kähler</figcaption>
	131	+ </figure>
	132	+ </div>
	133	+ </div>
	134	+
	135	+ <div class="ok-band">
	136	+ <div class="ok-kicker">Aus Erinnerungen wird eine Chronik</div>
	137	+ <div class="ok-count">
	138	+ <div class="ok-count-num">
	139	+ <span class="ok-count-pre">ca.</span>
	140	+ <span class="ok-count-big">1.000</span>
	141	+ <span class="ok-count-unit">Seiten</span>
	142	+ </div>
	143	+ <div class="ok-count-text">
	144	+ <p>Aus Fotos, Notizen und gesammeltem Material wurde mit der Zeit eine geordnete Schulchronik.</p>
	145	+ <p>Später brachte Otto Kähler sie selbst ins Internet. Über viele Jahre hat er sie dort persönlich gepflegt und ergänzt, bis sie rund 1.000 Seiten umfasste.</p>
	146	+ </div>
	147	+ </div>
	148	+ </div>
	149	+
	150	+ <div class="ok-section">
	151	+ <div class="ok-kicker">Die erste digitale Chronik</div>
	152	+ <h2>kaehler-kgs.de</h2>
	153	+ <p class="ok-lead">Lange bevor es ein Schul-Wiki gab, war die Geschichte der KGS hier online nachzulesen, zusammengetragen und gepflegt von einem Kollegen.</p>
	154	+
	155	+ <div class="ok-browser">
	156	+ <div class="ok-browser-bar">
	157	+ <span class="ok-dot"></span><span class="ok-dot"></span><span class="ok-dot"></span>
	158	+ <span class="ok-url">http://www.kaehler-kgs.de</span>
	159	+ </div>
	160	+ <div class="ok-browser-body">
	161	+ <div class="ok-stamp">Original</div>
	162	+ <div class="ok-browser-title">Die ursprüngliche Chronik</div>
	163	+ <div class="ok-browser-sub">aufgebaut und gepflegt von Otto Kähler</div>
	164	+ <a class="ok-btn" href="http://www.kaehler-kgs.de" target="_blank" rel="noopener">Zur ursprünglichen Chronik</a>
	165	+ </div>
	166	+ </div>
	167	+ </div>
	168	+
	169	+ <div class="ok-section">
	170	+ <div class="ok-kicker">Zeitstrahl</div>
	171	+ <h2>Fünf Jahrzehnte</h2>
	172	+ <div class="ok-tl">
	173	+ <div class="ok-tl-item">
	174	+ <div class="ok-tl-year">1976</div>
	175	+ <div class="ok-tl-text">Gründung der KGS Stuhr-Brinkum. Otto Kähler beginnt seine Tätigkeit an der Schule.</div>
	176	+ </div>
	177	+ <div class="ok-tl-item">
	178	+ <div class="ok-tl-year">2004</div>
	179	+ <div class="ok-tl-text">Ende seiner aktiven Tätigkeit an der KGS.</div>
	180	+ </div>
	181	+ <div class="ok-tl-item">
	182	+ <div class="ok-tl-year">Danach</div>
	183	+ <div class="ok-tl-text">Er führt die digitale Schulchronik weiter und pflegt sie.</div>
	184	+ </div>
	185	+ <div class="ok-tl-item ok-tl-now">
	186	+ <div class="ok-tl-year">2026</div>
	187	+ <div class="ok-tl-text">50 Jahre KGS Stuhr-Brinkum. Die historische Chronik wird in das XWiki der Schule übertragen.</div>
	188	+ </div>
	189	+ </div>
	190	+ </div>
	191	+
	192	+ <div class="ok-band">
	193	+ <div class="ok-kicker" style="text-align:center;">1976 – 2026</div>
	194	+ <div class="ok-compare">
	195	+ <div class="ok-side">
	196	+ <div class="ok-kicker">Damals</div>
	197	+ <div class="ok-side-name">kaehler-kgs.de</div>
	198	+ <div class="ok-side-desc">Die Chronik von Otto Kähler</div>
	199	+ </div>
	200	+ <div class="ok-arrow">&rarr;</div>
	201	+ <div class="ok-side">
	202	+ <div class="ok-kicker">Heute</div>
	203	+ <div class="ok-side-name">Schulchronik im XWiki</div>
	204	+ <div class="ok-side-desc">wiki.kgs-stuhr.de</div>
	205	+ </div>
	206	+ </div>
	207	+ <div class="ok-slogan">Neue Technik. Dieselbe Geschichte.</div>
	208	+ <div class="ok-center">
	209	+ <p>Die alte Internetchronik war technisch in die Jahre gekommen. 2026 wurde sie deshalb in das XWiki der Schule übertragen.</p>
	210	+ <p>Die Inhalte, die Bilder und die Idee dahinter stammen zu einem großen Teil von Otto Kähler. Das XWiki löst seine Arbeit nicht ab. Es sorgt dafür, dass sie erhalten bleibt und weiter wachsen kann.</p>
	211	+ </div>
	212	+ </div>
	213	+
	214	+ <div class="ok-thanks">
	215	+ <div class="ok-thanks-img">
	216	+ <img src="/xwiki/bin/download/schulchronik/WebHome/otto-kaehler.PNG" alt="Otto Kähler" />
	217	+ </div>
	218	+ <div class="ok-thanks-title">Danke, Otto.</div>
	219	+ <div class="ok-thanks-text">
	220	+ <p>Ohne Otto Kähler wäre diese Schulchronik nicht das, was sie heute ist. Über Jahrzehnte hat er festgehalten, was sonst vielleicht verloren gegangen wäre.</p>
	221	+ <p>Dass wir heute durch 50 Jahre KGS-Geschichte blättern können, verdanken wir zu einem großen Teil ihm. Die Form der Chronik hat sich verändert. Seine Arbeit ist ihr Fundament geblieben.</p>
	222	+ <div class="ok-sign">Die KGS Stuhr-Brinkum, im Jubiläumsjahr 2026</div>
	223	+ </div>
	224	+ </div>
	225	+
	226	+ <div class="ok-actions">
	227	+ <a class="ok-btn" href="/xwiki/bin/view/schulchronik/">Zur heutigen Schulchronik</a>
	228	+ <a class="ok-btn ok-btn-ghost" href="http://www.kaehler-kgs.de" target="_blank" rel="noopener">Zur ursprünglichen Chronik von Otto Kähler</a>
	229	+ </div>
	230	+
	231	+</div>
	232	+{{/html}}
	233	+